@extends('layouts.app_profile')
@section('style')
<!-- <link rel="stylesheet" type="text/css" href="{{URL::asset('profile/profile-2.min.css')}}"> -->
<link href="{{URL::asset('assets/global/plugins/bootstrap-timepicker/css/bootstrap-timepicker.min.css')}}" rel="stylesheet" type="text/css" />

<style type="text/css">
    .padding {
        padding: 0px;
    }
</style>
<style type="text/css">

</style>
@stop

@section('content') 
 
<!-- End tab-pane overtime Employee..................................-->
   


<!-- for factor begin -->
<div class="container-fluied" style="margin-top: 60px;"> 
    <div class="portlet">
        <div class="portlet-body">
            <div class="row">
                <div class="col-md-1" style="text-align: center">
                    <button class="btn red windowBackButton" style="padding: 2px 6px;" onclick = "window.history.back();">
                        @lang('layout.Back')
                    <i class="fa fa-mail-reply">
                    </i>
                    </button>            
                </div>
                <div class="col-md-10"></div>
                <div class="col-md-1"></div> 
            </div>
            <div class="row">
                <div class="col-md-1"></div>
                <div class="col-md-10">
        <table class="table table-striped table-bordered table-advance table-hover">
            <thead>
                <tr style="background-color: gray; color: white">
                    <td>@lang('layout.Number')</td>
                    <td>@lang('layout.Type')</td>
                    <td>@lang('layout.DiscountType')</td>
                    <td>@lang('layout.Discount')</td>
                    <td>@lang('layout.Date')</td>
                </tr>
            </thead>
            <tbody>
                <tr >
                    <td>{{$sale->number}}</td>
                    <td>  {{ __('layout.'.ucfirst($sale->type)) }}  </td>
                    <td>{{$sale->discount_type}}</td>
                    <td>{{$sale->discount}}</td>
                    <td>{{onlineConvertDate($sale->date)}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="col-md-1">
       
    </div>
</div>

            <div class="row">
                <div class="col-md-1"></div>
                <div class="col-md-10">
        <table class="table table-striped table-bordered table-advance table-hover">
            <thead>
                <tr style="background-color: gray; color: white">
                    <td>@lang('layout.Hour')</td>
                    <td>@lang('layout.Amount')</td>
                    <td>@lang('layout.Currency')</td>
                    <td>@lang('layout.Rate')</td>
                    <td>@lang('layout.Description')</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>{{$sale->hour}}</td>
                    <td>{{$sale->amount}}</td>
                    <td>{{$sale->currency}}</td>
                    <td>{{$sale->rate}}</td>
                    <td>{{$sale->description}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="col-md-1"></div>
</div>
 
    </div>
 </div>
 </div>
<!-- end for factor -->
<div class="container-fluied" style="margin-top: 40px;">
    <div class="portlet light bordered">
        <div class="portlet-title">
            <div class="caption font-dark">
                <i class="icon-settings font-dark"></i>
                <span class="caption-subject bold uppercase">@lang('layout.PurchaseDetails')</span>
            </div>
            {{-- <div class="actions">

                <span id="anchore-modal">
                    <a href="#" @click.prevent="showModal('SaleList')" id="" class="btn  btn-success">
                        <i class="fa fa-print"></i>
                    </a>
                </span>

            </div> --}}
        </div>
        <div class="portlet-body">
            <table class="table table-striped table-bordered table-hover" id="sales-table">
                <thead>
                    <tr>
                        <th>@lang('layout.SalesNumber')</th>
                        <th>@lang('layout.ItemName')</th>
                        <th>@lang('layout.SiteName')</th>
                        <th>@lang('layout.Quantity')</th>
                        <th>@lang('layout.Date')</th>
                        <th>@lang('layout.Currency')</th>
                        <th>@lang('layout.Rate')</th>
                        <th>@lang('layout.Price')</th>
                        <th>@lang('layout.Discount')</th>
                        <th>@lang('layout.Description')</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>

@endsection
@include('print.modal')

@include('customers.modal')
@push('scripts')


<script src="{{URL::asset('assets/global/plugins/bootstrap-timepicker/js/bootstrap-timepicker.min.js')}}" type="text/javascript"></script>
<script src="{{URL::asset('assets/pages/scripts/components-date-time-pickers.min.js')}}" type="text/javascript"></script>


<script src="{{url('/vue/sweetalert1.min.js')}}"></script>
<script> 
    //statement
    $(document).ready(function() { 
        $('#sales-table').DataTable({
            scrollCollapse: true,
            serverSide: true, 
            paging: true,
            retrieve: true, 
            ajax: {
                url: '{{route("sale.customerDetailsSale",$sale->sale_id)}}',
            },
            columns: [
                {
                    data: 'number',
                    name: 'number'
                },
                {
                    data: 'name',
                    name: 'name'
                },
                {
                    data: 'siteName',
                    name: 'siteName'
                },
                {
                    data: 'qty',
                    name: 'qty'
                },
                {
                    data: 'sDate',
                    name: 'sDate'
                },
                {
                    data: 'currency',
                    name: 'currency'
                },
                {
                    data: 'sale_rate',
                    name: 'sale_rate'
                }, 
                {
                    data: 'price',
                    name: 'price'
                },
                {
                    data: 'discount',
                    name: 'discount'
                },
                {
                    data: 'description',
                    name: 'description'
                },
            ]
        });
    }); 
 </script>

@endpush