@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.stock.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.stock.index') !!}">{{ __('Dismissal notice') }}</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>{{ __('Invoice') }}</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">{{ __('Customer name') }}</label>
              </div>
            </div>
            <div class="col-md-3">
              <div class="form-group">
                <input type="text" name="name" class="form-control ">
                @error('name')<span class="help-block text-danger">{{ $message }}</span>@enderror
                </div>
              </div>
              <div class="col-md-2">
                <div class="form-group">
                  <label for="name">{{ __('Mobile') }}</label>
                </div>
              </div>
              <div class="col-md-3">
                <div class="form-group">
                  <input type="text" name="mobile" class="form-control ">
                  @error('mobile')<span class="help-block text-danger">{{ $message }}</span>@enderror
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-2">
                  <div class="form-group">
                    <label for="invoice_number">{{ __('Invoice No') }}</label>
                  </div>
                </div>
                <div class="col-md-3">
                  <div class="form-group">
                    <input type="text" name="invoice_number" class="form-control ">
                    @error('invoice_number')<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 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>{{ __('Item Price') }}</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="number" name="unit_price[0]" readonly="readonly" id="unit_price" class="unit_price form-control ">
                                @error('unit_price')<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">
                                    <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>
                            <table class="table table-striped custom-table">
                              <tfoot>
                                <tr>
                                  <td></td>
                                  <td>{{ __('Subtotal') }}</td>
                                  <td><input type="text" name="sub_total" id="sub_total" class="sub_total form-control input-large" readonly="readonly"></td>
                                </tr>
                                <tr>
                                  <td></td>
                                  <td>{{ __('Discount') }}</td>
                                  <td>
                                    <div class="input-group mb-3">
                                      <select name="discount_type" id="discount_type" class="discount_type custom-select" style="width:200px">
                                        <option value="fixed">{{ __('Fixed value') }}</option>
                                        <option value="percentage">{{ __('percentage') }}</option>
                                      </select>
                                      <div class="input-group-append">
                                        <input type="number" name="discount_value" id="discount_value" class="discount_value form-control " value="0.00">
                                      </div>
                                    </div>
                                  </td>
                                </tr>
                                <tr>
                                  <td></td>
                                  <td>{{ __('Discount value') }}</td>
                                  <td><input type="text" name="discount" id="discount" class="discount form-control input-large" readonly="readonly"></td>
                                </tr>
                                <tr>
                                  <td></td>
                                  <td>{{ __('Vat') }} 14%</td>
                                  <td><input type="text" name="vat_value" id="vat_value" class="vat_value form-control input-large" readonly="readonly"></td>
                                </tr>
                                <tr>
                                  <td></td>
                                  <td>{{ __('Total') }}</td>
                                  <td><input type="text" name="total_due" id="total_due" class="total_due form-control input-large" readonly="readonly"></td>
                                </tr>
                              </tfoot>
                            </table>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  {!! Form::close() !!}
                @endsection
                @section('scripts')
                  {!! 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')
                        }
                      });
                      $("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('.unit_price').val((price).toFixed(0));
                        $row.find('.quantity').val(1);
                        $row.find('.row_sub_total').val((price).toFixed(0));
                        // 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 unit_price = $row.find('.unit_price').val() || 0;
                        $row.find('.row_sub_total').val((quantity * unit_price).toFixed(0));
                        $('#sub_total').val(sum_total('.row_sub_total'));
                        $('#vat_value').val(calculate_vat());
                        $('#total_due').val(sum_due_total());
                      });
                      $('#invoice_details').on('keyup blur', '.unit_price', function () {
                        let $row = $(this).closest('tr');
                        let quantity = $row.find('.quantity').val() || 0;
                        let unit_price = $row.find('.unit_price').val() || 0;
                        $row.find('.row_sub_total').val((quantity * unit_price).toFixed(0));
                        $('#sub_total').val(sum_total('.row_sub_total'));
                        $('#vat_value').val(calculate_vat());
                        $('#total_due').val(sum_due_total());
                      });
                      $('#invoice_details').on('keyup blur change', '.discount_type', function () {
                        $('#vat_value').val(calculate_vat());
                        $('#total_due').val(sum_due_total());

                        let sub_totalVal = $('.sub_total').val() || 0;
                        let discount_type = $('.discount_type').val();
                        let discount_value = parseFloat($('.discount_value').val()) || 0;
                        let discountVal = discount_value != 0 ? discount_type == 'percentage' ? sub_totalVal * (discount_value / 100) : discount_value : 0;
                        $('#discount').val(discountVal);
                      });
                      $('#invoice_details').on('keyup blur', '.discount_value', function () {
                        let sub_totalVal = $('.sub_total').val() || 0;
                        let discount_type = $('.discount_type').val();
                        let discount_value = parseFloat($('.discount_value').val()) || 0;
                        let discountVal = discount_value != 0 ? discount_type == 'percentage' ? sub_totalVal * (discount_value / 100) : discount_value : 0;
                        $('#discount').val(discountVal);
                        $('#vat_value').val(calculate_vat());
                        $('#total_due').val(sum_due_total());


                      });
                      $('#invoice_details').on('keyup blur', '.shipping', function () {
                        $('#vat_value').val(calculate_vat());
                        $('#total_due').val(sum_due_total());
                      });
                      let sum_total = function ($selector) {
                        let sum = 0;
                        $($selector).each(function () {
                          let selectorVal = $(this).val() != '' ? $(this).val() : 0;
                          sum += parseFloat(selectorVal);
                        });
                        return sum.toFixed(0);
                      }
                      let calculate_vat = function () {
                        let sub_totalVal = $('.sub_total').val() || 0;
                        let discount_type = $('.discount_type').val();
                        let discount_value = parseFloat($('.discount_value').val()) || 0;
                        let discountVal = discount_value != 0 ? discount_type == 'percentage' ? sub_totalVal * (discount_value / 100) : discount_value : 0;
                        let vatVal = (sub_totalVal - discountVal) * 0.14;
                        return vatVal.toFixed(0);
                      }
                      let sum_due_total = function () {
                        let sum = 0;
                        let sub_totalVal = $('.sub_total').val() || 0;
                        let discount_type = $('.discount_type').val();
                        let discount_value = parseFloat($('.discount_value').val()) || 0;
                        let discountVal = discount_value != 0 ? discount_type == 'percentage' ? sub_totalVal * (discount_value / 100) : discount_value : 0;
                        let vatVal = parseFloat($('.vat_value').val()) || 0;
                        let shippingVal = parseFloat($('.shipping').val()) || 0;
                        sum += sub_totalVal;
                        sum -= discountVal;
                        sum += vatVal;
                        sum += shippingVal;
                        $('#discount').val(discountVal);
                        return sum.toFixed(0);
                      }
                      $(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="number" name="unit_price[' + numberIncr + ']" readonly="readonly" class="unit_price form-control "></td>' +
                          '<td><input type="number" 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();
                          $('#sub_total').val(sum_total('.row_sub_total'));
                          $('#vat_value').val(calculate_vat());
                          $('#total_due').val(sum_due_total());
                        });
                        $('form').on('submit', function (e) {
                          $('input.product_name').each(function () { $(this).rules("add", { required: true }); });
                          $('select.unit').each(function () { $(this).rules("add", { required: true }); });
                          $('input.quantity').each(function () { $(this).rules("add", { required: true }); });
                          $('input.unit_price').each(function () { $(this).rules("add", { required: true }); });
                          $('input.row_sub_total').each(function () { $(this).rules("add", { required: true }); });
                          e.preventDefault();
                        });
                        $('form').validate({
                          rules: {
                            'name' : { required:true },
                            'email' : { required:true, email:true },
                            'mobile' : { required:true, digits: true, minlength: 10, maxlength: 14 },
                            'company_name' : { required:true },
                            'invoice_number' : { required:true, digits: true },
                            'invoice_date' : { required:true },
                          },
                          submitHandler: function (form) {
                            form.submit();
                          }
                        });
                      });
                    </script>
                  @endsection