<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
    <title>Hello, world!</title>
  </head>
  <body>
        <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3">
            <h1 class="h2">New Invoice</h1>
            <a href="{{URL::to('invoices')}}" class="btn btn-outline-secondary float-right">Back to List</a>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-8">
                    <form action="" method="get" enctype="multipart/form-data">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="card mb-2">
                                    <div class="card-header">
                                        <div class="row py-2">
                                               <div class="col-md-10 mx-auto">
                                                   <input type="text" class="form-control" id="search-query" >
                                                   <select id="editable-select" multiple type="text" size='5' class="form-control " style="display:none" >
                                                </select>
                                               </div>
                                          </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                       <div class="row">
                           <div class="col-md-12">
                               <div class="card">
                                   <div class="card-header">
                                       <div id="item_add">
                                       <div class="row text-center table-responsive-md" id="inputFormRow">
                                           <table class="table table-bordered">
                                               <tbody>
                                               <tr>
                                                   <td>
                                                       <div class="form-group">
                                                           <input type="text" placeholder="Passenger Name" class="form-control mb-2 shadow-sm" name="name[]">
                                                           <input type="text" placeholder="Class" class="form-control shadow-sm mb-2 " name="classes[]">
                                                       </div>

                                                   </td>
                                                   <td>
                                                       <div class="form-group">
                                                           <input type="text" placeholder="Route" class="form-control mb-2 shadow-sm" name="route[]">
                                                           <input type="text" placeholder="Airways Name" class="form-control mb-2  shadow-sm" name="airways[]">
                                                           <input type="date" placeholder="Flights Date" class="form-control mb-2  shadow-sm" name="flights_date[]">
                                                       </div>
                                                   </td>
                                                   <td>
                                                       <div class="form-group">
                                                           <input type="text" placeholder="Ticket No" class="form-control mb-2 shadow-sm" name="ticket_no[]">
                                                           <input type="text" placeholder="PNR" class="form-control mb-2  shadow-sm" name="PNR[]">
                                                           <input type="date" placeholder="Ticket Date" class="form-control mb-2  shadow-sm" name="ticket_date[]">
                                                       </div>
                                                   </td>
                                                   <td>
                                                       <input type="text" name="qty[]" placeholder="qty" class="form-control quantity mb-2 shadow-sm" required="" >
                                                       <input type="text" name="amount[]" placeholder="Amount" class="form-control budget mb-2 shadow-sm">
                                                       <input type="text" name="subtotal[]" placeholder="Subtotal" class="form-control amount mb-2 shadow-sm">
                                                   </td>
                                                   <td><a href="javascript:void(0)" class="btn btn-danger remove"><i class="fas fa-trash-alt"></i></a></td>
                                               </tr>

                                               </tbody>
                                               <tfoot>
                                               <tr>






                                                   <td  colspan="3">Total</td>
                                                   <td  ><input type="text"  name="total" class="total form-control" style="width: 100px!important;"> </td>
                                                   <td  ></td>
                                               </tr>
                                               </tfoot>
                                           </table>






                                           </div>
                                      </div>

                                       <div class="btn-group my-3" role="group" aria-label="Basic example">
                                          <button type="button" class="btn btn-primary addRow shadow btn-sm px-4" ><i class="fas fa-plus mr-1"></i>Add Blank Link</button>
                                          <button type="button" class="btn btn-danger shadow btn-sm px-4 d-none" style="display:none" id="remove-btn"><i class="fas fa-trash mr-1"></i>Remove</button>
                                        </div>
                                       <div class="form-group">
                                           <textarea class="form-control" id="terms_n_condition" name="terms_n_condition"><p><strong>Terms & Condition:</strong></p><ul><li>Client must renew the domain & hosting before 1 month of expired date.</li><li>If Client Failed to renew before one month then additional 2000 taka will add with renew charge.</li><li>If client want to renew after expired date then additional 8000 taka will add with renew charge.</li><li>If client failed to renew within 1 month of expired date then the domain will permanently block and Hostrare Ltd. will not take any responsibility to renew the domain.</li><li>Domain Control Panel / Transfer Cost is: 2000.00 taka. Email marketing is strongly forbidden from our hosting. It will cause permanent block of hosting</li></ul><p>*** Our Others Services & Products:</p><table><colgroup><col><col></colgroup><tbody><tr><td><ul><li>Website Development</li><li>CRM & ERP Software</li><li>Accounting Software</li><li>Sales & Purchases Software</li><li>Inventory Software</li><li>Hr-Payroll Software</li><li>Sms Software</li><li>Bulk Email</li></ul></td><td><ul><li>Search Engine Optimization (SEO)</li><li>Travel Management Software</li><li>Hospital Management Software</li><li>Import & Export Software</li><li>Education Manage Software</li><li>News portal</li><li>E-Commerce</li><li>Us Based Domain & Hosting</li></ul></td></tr></tbody></table></textarea>
                                       </div>
                                   </div>
                               </div>
                           </div>
                       </div>
                </div>
                <div class="cold-md-4">
                    <div class="card mb-2">
                        <div class="card-header">
                             <div class="btn-group my-3" role="group" aria-label="Basic example">
                                  <button type="submit" name="save_invoice" value="1" class="btn btn-primary btn-sm px-4 shadow"><i class="fas fa-file-invoice mr-1"></i>Save Invoice</button>
                                  <button type="submit" name="save_invoice_close" value="2"  class="btn btn-primary btn-sm px-4 shadow"><i class="fas fa-check mr-1"></i>Save And Close</button>
                            </div>
                        </div>
                    </div>
                    <div class="card mb-2 d-none">
                        <div class="card-header text-right">
                             <p class="font-weight-bold">Subtotal  <span class="border-bottom font-weight-light">: 123</span></p>
                             <p class="font-weight-bold">Discount  <span class="border-bottom font-weight-light">: 123</span></p> 
                             <p class="font-weight-bold">Tax  <span class="border-bottom font-weight-light">: 123</span></p>
                             <p class="font-weight-bold">Total  <span class="border-bottom font-weight-light">: 123</span></p>
                        </div>
                    </div>
                     <div class="card mb-2">
                        <div class="card-header ">
                             <div class="form-group">
                            <label for="customer_id">Customer</label>
                            <select class="form-control" id="customer_id" name="customer_id">
                              <option>Select Contact...</option>
                              @foreach($users as $user)
                              <option value="{{ $user->id }}">{{ $user->name }}</option>
                              @endforeach
                            </select>
                          </div>
                          <div class="form-group">
                              <label>Discount Amount</label>
                              <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)" placeholder="Discount Amount" name="discount">
                             
                          </div>
                         
                          <div class="form-group">
                              <label>Invoice Date</label>
                              <input type="date" class="form-control " placeholder="{{  date('y-m-d') }}" name="invoice_date"> 
                          </div>
                          <div class="form-group">
                            <label for="payment_terms">Payment Terms</label>
                            <select class="form-control" id="payment_terms" name="payment_terms">
                                  <option value=" "> Due On Receipt </option>
                                  <option value="3"> +3days </option>
                                  <option value="5"> +5days </option>
                                  <option value="7"> +7days </option>
                                  <option value="10"> +10days </option>
                                  <option value="15"> +15days </option>
                                  <option value="30"> +30days </option>
                                  <option value="45"> +45days </option>
                                  <option value="60"> +60days </option>
                            </select>
                          </div>
                          <div class="form-group">
                              <label>Amount In Words</label>
                              <input type="text" class="form-control " placeholder="Amount In Word" name="amount_in_words"> 
                          </div>
                          <div class="form-group">
                            <label for="customer_id">Sales Tax</label>
                            <select class="form-control" id="customer_id" name="sales_tax_id">
                              <option value="0">None</option>
                              @foreach($SaleTax as $SaleTax)
                              <option value="{{ $SaleTax->rate }}">sales Tax ({{ $SaleTax->rate }}%)</option>
                              @endforeach
                              
                            </select>
                          </div>
                          </form>
                          <div class="button-group d-none">
                              <button type="button" class="btn btn-success btn-sm shadow" data-toggle="modal" data-target="#exampleModal">
                                <i class="fas fa-minus-circle"></i> Set discount 
                              </button>
                          </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Modal -->
        <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
          <div class="modal-dialog ">
            <div class="modal-content rounded-0">
              <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Set Discount</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">×</span>
                </button>
              </div>
              <div class="modal-body">
                  <form action="{{ URL::to('/save_discount') }}" method="post" enctype="multipart/form-data">@csrf
                     <div class="input-group mb-3">
                      <div class="input-group-prepend">
                        <span class="input-group-text">Discount</span>
                      </div>
                      <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)" name="discount">
                      <div class="input-group-append">
                        <span class="input-group-text">.00</span>
                      </div>
                    </div>
                    
                    <div class="form-group">
                        <label>
                            Discount type
                        </label>
                        <br>
                        <div class="form-check form-check-inline ml-5">
                          <label class="form-check-label" for="discount_type">
                              <input class="form-check-input" type="radio" id="discount_type" value="1" name="discount_type">Percentage (%)
                              </label>
                        </div>
                        <br>
                        <div class="form-check form-check-inline ml-5">
                          <label class="form-check-label" for="inlineCheckbox2"> 
                          <input class="form-check-input" type="radio" id="discount_type" value="2" name="discount_type">Fixed Amount
                          </label>
                        </div>
                    </div>
                    <div class="modal-footer">
                    <button type="submit" class="btn btn-primary rounded-0" >Save</button>
                  </div>
                  </form>
              </div>
            </div>
          </div>
        </div>
        
        
      
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

						
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js">
        </script>
        <script>


        $('tbody').delegate('.quantity,.budget','keyup',function(){
        var tr=$(this).parent().parent();
        var quantity=tr.find('.quantity').val();
        var budget=tr.find('.budget').val();
        var amount=(quantity*budget);
        tr.find('.amount').val(amount);
        total();
        });
        function total(){
        var total=0;
        $('.amount').each(function(i,e){
        var amount=$(this).val()-0;
        total +=amount;
        });
        $('.total').val(total);
        }
        $('.addRow').on('click',function(){
        addRow();
        });
        function addRow()
        {
        var tr='<tr>'+
            '<td><input type="text" name="product_name[]" class="form-control" required=""></td>'+
            '<td><input type="text" name="brand[]" class="form-control"></td>'+
            '<td><input type="text" name="quantity[]" class="form-control quantity" required=""></td>'+
            '<td><input type="text" name="budget[]" class="form-control budget"></td>'+
            ' <td><input type="text" name="amount[]" class="form-control amount"></td>'+
            '<td><a href="javascript:void(0)" class="btn btn-danger remove"><i class="fas fa-trash-alt"></i></a></td>'+
            '</tr>';

        var tr2=
            '<tr>'+
            '<td>'
            +'<div class="form-group">'
            +'<input type="text" placeholder="Passenger Name" class="form-control mb-2 shadow-sm" name="name[]">'
            +'<input type="text" placeholder="Class" class="form-control shadow-sm mb-2 " name="classes[]">'
            +'</div>'+
            '</td>'+
            '<td>'
            +'<div class="form-group">'
            +'<input type="text" placeholder="Route" class="form-control mb-2 shadow-sm" name="route[]">'
            +'<input type="text" placeholder="Airways Name" class="form-control mb-2  shadow-sm" name="airways[]">'
            +'<input type="date" placeholder="Flights Date" class="form-control mb-2  shadow-sm" name="flights_date[]">'
            +'</div>'+
            '</td>'+
            '<td>'
            +'<div class="form-group">'
            +'<input type="text" placeholder="Ticket No" class="form-control mb-2 shadow-sm" name="ticket_no[]">'
            +'<input type="text" placeholder="PNR" class="form-control mb-2  shadow-sm" name="PNR[]">'
            +'<input type="date" placeholder="Ticket Date" class="form-control mb-2  shadow-sm" name="ticket_date[]">'
            +'</div>'+
            '</td>'+
            '<td>'
            +'<div class="form-group">'
            +' <input type="text" name="qty[]" class="form-control quantity mb-2 shadow-sm" required="">'
            +' <input type="text" name="amount[]" class="form-control budget mb-2 shadow-sm">'
            +'<input type="text" name="subtotal[]" class="form-control amount mb-2 shadow-sm">'
            +'</div>'+
            '</td>'+
            '<td><a href="javascript:void(0)" class="btn btn-danger remove"><i class="fas fa-trash-alt"></i></a></td>'+
            '</tr>';


            $('tbody').append(tr2);
        };
        $('.remove').live('click',function(){
        var last=$('tbody tr').length;
        if(last==1){
        alert("you can not remove last row");
        }
        else{
        $(this).parent().parent().remove();
        }

        });
        </script>
   </body>
</html>