@extends('home')
@section('title')
  @lang('site.site_name')
@endsection
@section('styles')
  {!! Html::style(Theme::current()->assetPath.'/pages/css/profile.min.css') !!}
  {!! Html::style(Theme::current()->assetPath.'/global/plugins/bootstrap-markdown/css/bootstrap-markdown.min.css') !!}
  {!! Html::style(Theme::current()->assetPath.'/global/plugins/bootstrap-fileinput/bootstrap-fileinput.css') !!}
  {!! Html::style(Theme::current()->assetPath.'/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css') !!}
@endsection
@section('content')
  <div class="page-bar">
    <ul class="page-breadcrumb">
      <li>
        <a href="{{ route('dashboard.home.page') }}">{{ __('Home') }}</a>
        <i class="fa fa-circle"></i>
      </li>
      <li>
        <a href="{{ Route('coupon.home') }}">
          {{ __('Offers Section') }}
        </a>
        <i class="fa fa-circle"></i>
      </li>
      <li>
        {{ __('Direct Debit Offer') }}
        <i class="fa fa-circle"></i>
      </li>
      <li>
        <strong>
        </strong>
      </li>
    </ul>
    <div class="page-toolbar">
      <div class="btn-group pull-left">
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <div class="portlet light bordered">
        {!! Form::open(array('route' => 'direct.discount','method' => 'PUT',  'class' => 'form-inline margin-bottom-0','id' => 'myform')) !!}
        <div class="portlet light bordered bg-grey-cararra bg-font-grey-cararra">
          <div class="form-body ">
            <div class="row">
              <div class="col-md-10">
                <fieldset class="btn-action">
                  <legend>{!! __('Direct Debit Offer') !!}</legend>
                  <br>
                  <div class="row">
                    <div class="col-md-5">
                      <select class="form-control select2" data-placeholder="{{ __('Select category') }}" name="category_id" id="category_id" style="width: 100%">
                        <option value="-1">{!! __('Select category') !!}</option>
                        @foreach ($categories as $item)
                          <option value='{{ $item->id }}'  @if (old('category_id',request('category_id')) == $item->id)
                            selected="selected"
                          @endif
                          >
                          @if ($item->depth > 1)
                            {!! str_repeat('-',$item->depth) !!}<i class="fa fa-angle-right" aria-hidden="true"></i>
                          @endif
                          {{ $item->title }} ({{ $item->products->count() }})
                        </option>
                      @endforeach
                    </select>
                  </div>
                  <div class="col-md-4">
                    <input type="text" class="form-control " name="title" value="{!! old('title',request('title')) !!}" placeholder="{!! __('Item title') !!}">
                  </div>
                  <div class="col-md-2">
                    @php
                      $limit        =  Session::get('limit_product');
                    @endphp
                    <select class="form-control" data-placeholder="{{ __('Limit') }}" name="limit_by" id="limit_by" style="width: 100%;" onchange="this.form.submit()">
                      <option value="">{!! __('Limit') !!}</option>
                      <option value="10" @if ($limit == '10')
                        selected="selected"
                      @endif>10</option>
                      <option value="20" @if ($limit == '20')
                        selected="selected"
                      @endif>20</option>
                      <option value="30" @if ($limit == '30')
                        selected="selected"
                      @endif>30</option>
                      <option value="50" @if ($limit == '50')
                        selected="selected"
                      @endif>50</option>
                      <option value="100" @if ($limit == '100')
                        selected="selected"
                      @endif>100</option>
                    </select>
                  </div>
                </div>
              </fieldset>
            </div>
            <div class="col-md-2">
              <div class="actions btn-set btn-lg">
                <button class="icon-btn color-view bg-blue-soft bg-font-blue-soft bold uppercase" type="submit" style="margin-top: 10px;height: 70px;min-width: auto;width: 100%;background: #3598dc;">
                  <div style="color: #fff;font-size: 20px;">{!! __('Search') !!}</div>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      {{ Form::close() }}
      @if ($products->total() > 0)
        {!! Form::open(array('route' => 'save.product.offers','method' => 'post',  'class' => 'form-inline margin-bottom-0')) !!}
        <div class="caption p-10">
          <i class="icon-settings font-green-sharp"></i>
          <span class="caption-subject font-green-sharp bold uppercase">
            {!! __('Results No') !!} ({{ $products->total() }} {!! __('Item') !!})
          </span>
          <span class="caption-subject pull-right">
          </span>
        </div>  <div class="portlet-body">
          <table class="table table-striped custom-table black-border"  >
            <tr class="tr2">
              <th width="2%"><i class="fa fa-list"></i></th>
              <th>{{__('an item')}}</th>
              <th width="20%">{{__('Category')}}</th>
              <th width="10%">{{__('Current price')}}</th>
              <th width="10%">{{__('Price after discount')}}</th>
              <th width="10%">{{__('Percent of discount')}}</th>
            </tr>
            @foreach ($products as $index => $item)
              <tr id='{{ $item->id }}' class="calc">
                <td>
                  {{ $loop->index + $products->firstItem() }}
                </td>
                <td>
                  <a href="{!! URL::route('admin.product.edit',[$item->id]) !!}" >
                    {{ $item->title }}
                  </a>
                </td>
                <td class="bg-grey bg-font-grey">
                  {{ optional($item->Category)->title }}
                </td>
                <td class="center ">
                  {{ round($item->price) }}
                </td>
                <td class="center bg-grey bg-font-grey">
                  <input size="4" class="form-control fls-offer" type="text" name="offer_item[{!! $item->id !!}]" value="{!! intval($item->offer) > 0 ? $item->offer : '' !!}"  data-id="{!! $item->id !!}" data-price="{!! $item->price !!}">
                </td>
                <td class="center ">
                  <input size="3" class="form-control fls-percent" type="text" name="percentage[{!! $item->id !!}]" value=""  data-id="{!! $item->id !!}" data-price="{!! $item->price !!}">%
                </td>
              </tr>
            @endforeach
            <tfoot>
              <tr>
                <td colspan="5"></td>
                <td colspan="3">
                  <button data-toggle="confirmation"
                  data-btn-ok-label="{{ __('Yes') }}"
                  data-btn-cancel-label="{{ __('No') }}"
                  data-title="<span class='caption-subject font-blue bold '>{{ __('Sure update') }}</span>"
                  type="submit" class="btn btn-info btn-lg btn-action">  <i class="fa fa-check"></i> {!! __('Save offers') !!}</button>
                </td>
              </tr>
            </tfoot>
          </table>
          <div class="pagination pagination-centered"> {{ $products->appends(request()->except('_token'))->links() }} </div>
          {{ Form::close() }}
        @else
          <div class="note note-danger">
            <br>
            <h4 class="block">{!! __('No Results') !!}</h4>
            <br>
          </div>
        @endif
      </div>
    </div>
  </div>
</div>
@endsection
@section('scripts')
  {!! Html::script(Theme::current()->assetPath.'/jquery-mask-as-number.min.js') !!}
  {!! Html::script(Theme::current()->assetPath.'/global/plugins/bootstrap-fileinput/bootstrap-fileinput.js') !!}
  {!! Html::script(Theme::current()->assetPath.'/global/plugins/bootstrap-markdown/lib/markdown.js') !!}
  {!! Html::script(Theme::current()->assetPath.'/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js') !!}
  {!! Html::script(Theme::current()->assetPath.'/global/plugins/bootstrap-markdown/js/bootstrap-markdown.js') !!}
  {!! Html::script(Theme::current()->assetPath.'/global/plugins/jquery-ui/jquery-ui.min.js') !!}
  <script type="text/javascript">
    const calculateSale = (listPrice, discount) => {
      listPrice = parseFloat(listPrice);
      discount  = parseFloat(discount);
      return (listPrice - ( listPrice * discount / 100 )).toFixed(2); // Sale price
    }
    const calculateDiscount = (listPrice, salePrice) => {
      listPrice = parseFloat(listPrice);
      salePrice = parseFloat(salePrice);
      return 100 - (salePrice * 100 / listPrice); // Discount percentage
    }
    $( function() {
      $.ajaxSetup({
        headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
      });
      $("select").select2();
      // $('.fls-edit').maskAsNumber();
      // $(this).closest('tr.menu').find('.parent').val();
      $('.fls-edit').on('click', function() {
        $(this).next("span").show();
        $('.fls-edit').prop('readonly', true);
        $(this).prop('readonly', false);
      });
      // fls-offer  fls-percent
      $(document).on("blur", '.fls-offer', function() {
        var price   = $(this).data('price');
        var sale    = $(this).val();
        let disc = 0;                // Default to 0%
        if ( sale.length ) {
          disc = calculateDiscount(price, sale);
        }
        if (parseInt(disc) > 0) {
          $(this).closest('tr').find('.fls-percent').val(parseInt(disc));
        }          // $(this).val(disc);
      });
      $(document).on("blur", '.fls-percent', function() {
        var price   = $(this).data('price');
        var disc    = $(this).val();
        let calc_sale = disc;
        if ( disc.length ) {
          calc_sale = calculateSale(price, disc);
        }
        if (parseInt(calc_sale) > 0) {
          $(this).closest('tr').find('.fls-offer').val(parseInt(calc_sale));
        }
        // $(this).val(disc);
      });
      $(document).ready(function(){
        $('tr.calc').each(function(){
          var price   = $(this).find('.fls-offer').data('price');
          var sale    = $(this).find('.fls-offer').val();
          let disc = 0;                // Default to 0%
          if ( sale.length ) {
            disc = calculateDiscount(price, sale);
          }
          if (parseInt(disc) > 0) {
            $(this).find('.fls-percent').val(parseInt(disc));
          }
        });
      });
    } );
  </script>
@endsection