@extends('home')
@section('title')
  @lang('site.site_name')
@endsection
@section('styles')
  {!! 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') !!}
  {!! Html::style(theme_url('css/bootstrap-datepicker.min.css')) !!}
  <style media="screen">
  .datepicker {
    direction: rtl;
  }
  .datepicker.dropdown-menu {
    right: initial;
  }
  .table td.pd-20 ,
  .table th.pd-20 {
    padding: 20px 0;
    font-weight: bold;
    font-size: 16px;
  }
  </style>
@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>
        {{ __('Invoices') }}
        <i class="fa fa-circle"></i>
      </li>
      <li>
        <span>{{ __('Dismissal notice') }}</span>
      </li>
    </ul>
    <div class="page-toolbar">
      <div class="btn-group pull-left">
        <div class="actions">
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <div class="portlet light bordered">
        <div class="portlet-title">
          <div class="caption">
            <i class="fa fa-edit font-purple-soft"></i>
            <span class="caption-subject font-purple-soft bold">{{ __('Dismissal notice') }}</span>
            <h1 class="page-title">
              <small>  </small>
            </h1>
          </div>
          <div class="actions">
            <a href="{{ route('admin.stock.create') }}" class="btn  btn-success"><i class="fa fa-plus"></i> {{ __('New invoice') }}
            </a>
          </div>
        </div>
        <div class="portlet-body">
          <table class="table table-striped custom-table"  >

                    <thead>
                      <tr>
                        <th width="1%"></th>
                        <th width="15%">{!! __('Date') !!}</th>
                        <th>{{ __('To hand') }}</th>
                        <th>{!! __('Number of items') !!}</th>
                        <th width="15%">{!! __('By') !!}</th>
                        <th width="15%">{!! __('Date') !!}</th>
                      </tr>
                    </thead>
                    <tbody>
                      @foreach ($invoices as $key => $invoice)
                        <tr>
                          <th width="1%">{{ $loop->index + $invoices->firstItem() }}</th>
                          <td class="center bg-blue-madison bg-font-white">
                            <a class="font-white font18" href="{!! URL::route('admin.stock.show', [$invoice->id]) !!}">{{ $invoice->created_at->format('Y-m-d') }}</a> </td>
                            <td class="center bg-white bg-font-white">{!! $invoice->name !!}</td>
                          <th>{!! Optional($invoice->items)->count() !!}</th>
                          <td class="center bg-white bg-font-white">{!! Optional($invoice->user)->name !!}</td>
                          <td class="center bg-white bg-font-white">
                            <a href="{!! URL::route('admin.stock.show', [$invoice->id]) !!}" class="btn grey-cascade"><i class="fa fa-search"></i> {!! __('View the invoice') !!}</a>
                          </td>
                        </tr>
                      @endforeach
                    </tbody>
                  </table>
                  <div class="pagination pagination-centered"> {{ $invoices->appends(request()->except('_token'))->links() }} </div>
                </div>
              </div>
            </div>
          </div>
        @endsection
        @section('scripts')
          {!! 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-validation/js/jquery.validate.min.js') !!}
          {!! Html::script(Theme::current()->assetPath.'/global/plugins/jquery-validation/js/additional-methods.min.js') !!}
          {!! Html::script(Theme::current()->assetPath.'/pages/scripts/form-validation.js') !!}
          {!! Html::script(Theme::current()->assetPath.'/global/plugins/jquery-ui/jquery-ui.min.js') !!}
          {!! Html::script(theme_url('js/bootstrap-datepicker.min.js')) !!}
          {!! Html::script(theme_url('js/bootstrap-datepicker.ar.min.js')) !!}
          <script type="text/javascript">
            $( function() {
              $("select").select2();
              $('.date-picker').datepicker({
                language: 'ar',
                format: 'yyyy-mm-dd',
                rtl: 0,
                autoclose: true,
                clearBtn: true,
                changeMonth: true,
                changeYear: true
              });
              $.ajaxSetup({
                headers: {
                  'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
              });
            } );
          </script>
        @endsection