@extends('home')
@section('title')
  @lang('site.site_name')
@endsection
@section('styles')
  {!! Html::style(theme_url('/invoice.css')) !!}
  {!! Html::style(theme_url('css/bootstrap-datepicker.min.css')) !!}
  <style media="screen">
  .form-group label{padding-right: 15px}
  </style>
@endsection
@php
$list_products = '<select class="" name="product_id[]" style="width:100%"><option value="">'.__('Select').'</option>';
foreach ($products as $key => $product) {
  $list_products .= '<option  data-price="'.$product->price.'" data-quantity="'.$product->stock.'" value="'.$product->id.'">'.$product->title.'</option>';
}
$list_products .= '</select>';
@endphp
@section('content')
  {!! Form::open(array('route' => 'admin.invoice.store','method' => 'POST',  'class' => 'form-horizontal','id' => 'myform')) !!}
  <div class="row">
    <div class="col-md-12">
      <div class="page-head">
        <div class="state-information">
          <ol class="breadcrumb m-b-less bg-less">
            <li>
              <a href="{{ Route('dashboard.home.page') }}">{{ __('Dashboard') }}</a>
            </li>
            <li>
              <a href="{!! URL::route('admin.invoice.index') !!}">{{ __('Store bills') }}</a>
            </li>
            <li class="active">{{ __('New invoice') }}</li>
          </ol>
        </div>
      </div>
    </div>
  </div>
  <div class="portlet box blue">
    <div class="portlet-title">
      <div class="caption">
        <i class="fa fa-gift"></i>{{ __('Bill supply') }}</div>
      </div>
      <div class="portlet-body form">
        <div class="form-body">
          <div class="row">
            <div class="col-md-2">
              <div class="form-group">
                <label for="name">{{ __('The supplier') }}</label>
              </div>
            </div>
            <div class="col-md-3">
              <div class="form-group">
                <input type="text" name="name" class="form-control " required>
                @error('name')<span class="help-block text-danger">{{ $message }}</span>@enderror
                </div>
              </div>
              <div class="col-md-2">
                <div class="form-group">
                  <label for="invoice_date">{{ __('Invoice date') }}</label>
                </div>
              </div>
              <div class="col-md-3">
                <div class="form-group">
                  <input disabled value="{{ date('Y-m-d') }}" type="text" name="invoice_date" class="form-control pickdate"> @error('invoice_date')<span class="help-block text-danger">{{ $message }}</span>@enderror
                  </div>
                </div>
              </div>
              <div class="table-responsive">
                <table id="invoice_details" class="table table-striped custom-table black-border">
                  <thead>
                    <tr class="tr2">
                      <th></th>
                      <th width="30%">{{ __('Item title') }}</th>
                      <th>{{ __('Quantity') }}</th>
                      <th>{{ __('Current Balance') }}</th>
                      <th>{{ __('Subtotal') }}</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr class="cloning_row" id="0">
                      <td>#</td>
                      <td>
                        {!! $list_products !!}
                        @error('product_name')<span class="help-block text-danger">{{ $message }}</span>@enderror
                        </td>
                        <td>
                          <input type="number" value="1" name="quantity[0]" step="1" id="quantity" class="quantity form-control ">
                          @error('quantity')<span class="help-block text-danger">{{ $message }}</span>@enderror
                          </td>
                          <td>
                            <input type="text" name="total_quantity[0]" readonly="readonly" id="total_quantity" class="total_quantity form-control ">
                            @error('total_quantity')<span class="help-block text-danger">{{ $message }}</span>@enderror
                            </td>
                            <td>
                              <input type="text" name="row_sub_total[0]" id="row_sub_total" class="row_sub_total form-control " readonly="readonly">
                              @error('row_sub_total')<span class="help-block text-danger">{{ $message }}</span>@enderror
                              </td>
                            </tr>
                          </tbody>
                          <tfoot>
                            <tr>
                              <td colspan="5" class="text-right">
                                <button type="button" class="btn_add btn btn-info btn-lg btn-action">  <i class="fa fa-check"></i>{{ __('Add Item') }}</button>
                              </td>
                            </tr>
                          </tfoot>
                        </table>
                        <div class="portlet light bordered bg-grey-cararra bg-font-grey-cararra">
                          <div class="form-body text-center">
                            <div class="actions btn-set">
                              <button class="icon-btn blue " type="submit" style="margin-top: 10px;height: 80px;width: 180px;background: #3598dc;">
                                <div style="color: #fff;font-size: 20px;">{!! __('Procedure') !!}</div>
                              </button>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              {!! Form::close() !!}
            @endsection
            @section('scripts')
              {!! Html::script(Theme::current()->assetPath.'/jquery.validate.js') !!}

              {!! Html::script(Theme::current()->assetPath.'/jquery-repeater/jquery.repeater.js') !!}
              {!! Html::script(theme_url('js/bootstrap-datepicker.min.js')) !!}
              {!! Html::script(theme_url('js/bootstrap-datepicker.ar.min.js')) !!}
              <script type="text/javascript">
                jQuery(document).ready(function($){
                  'use strict';
                  $.ajaxSetup({
                    headers: {
                      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                  });
                  $.validator.messages.required = "{{ __('This field is required.') }}";
                  $.validator.messages.digits 	= "{{ __('Please enter only digits') }}";
                  $.validator.messages.email 		= "{{ __('Please enter a valid email address.') }}";
                  $.validator.messages.equalTo 	= "{{ __('Passwords do not match') }}";
                  $(".form-horizontal").on('submit', function (e) {
                    $('input.row_sub_total').each(function () { $(this).rules("add", { required: true }); });
                  });
                  $(".form-horizontal").validate({});
                  $("select").select2();
                  // $(document).on("change keyup blur", "#meal-percent", function() {
                  $( "body" ).on( "change", 'select[name="product_id[]"]', function() {
                    var item      = $(this).val();
                    var price     = $(this).find(":selected").data("price");
                    var quantity_max  = $(this).find(":selected").data("quantity");
                    let $row      = $(this).closest('tr');
                    $row.find('.quantity').val(1);
                    $row.find('.total_quantity').val(quantity_max);
                    $row.find('.row_sub_total').val(quantity_max);
                    // alert(price+ '   -  '+quantity+ '   -  '+item);
                  });
                  $('.pickdate').datepicker({
                    format: "yyyy-mm-dd",
                    maxViewMode: 2,
                    clearBtn: true,
                    language: "ar",
                    orientation: "bottom auto",
                    keyboardNavigation: false,
                    autoclose: true,
                    todayHighlight: true,
                    toggleActive: true
                  });
                  $('#invoice_details').on('keyup blur', '.quantity', function () {
                    let $row = $(this).closest('tr');
                    let quantity = $row.find('.quantity').val() || 0;
                    let total_quantity = $row.find('.total_quantity').val() || 0;
                    var quantity_max  = $row.find(":selected").data("quantity");

                    let sum =parseInt(quantity_max)+parseInt(quantity);
                    $row.find('.row_sub_total').val(sum);

                  });


                  $(document).on('click', '.btn_add', function () {
                    let trCount = $('#invoice_details').find('tr.cloning_row:last').length;
                    let numberIncr = trCount > 0 ? parseInt($('#invoice_details').find('tr.cloning_row:last').attr('id')) + 1 : 0;
                    $('#invoice_details').find('tbody').append($('' +
                    '<tr class="cloning_row" id="' + numberIncr + '">' +
                      '<td><button type="button" class="btn btn-danger btn-sm delegated-btn"><i class="fa fa-minus"></i></button></td>' +
                      '<td>{!! $list_products !!}</td>' +
                      '' +
                      '<td><input type="number" name="quantity[' + numberIncr + ']" value="1" class="quantity form-control "></td>' +
                      '<td><input type="text" name="total_quantity[' + numberIncr + ']" readonly="readonly" class="total_quantity form-control "></td>' +
                      '<td><input type="text" name="row_sub_total[' + numberIncr + ']"  class="row_sub_total form-control " readonly="readonly"></td>' +
                      '</tr>'));
                      $("select").select2();
                    });
                    $(document).on('click', '.delegated-btn', function (e) {
                      e.preventDefault();
                      $(this).parent().parent().remove();

                    });

                  });
                </script>
              @endsection