@extends('layouts.master')

@section('content')
<!-- DataTables -->
<link rel="stylesheet" href="{{ asset('/assets/') }}/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="{{ asset('/assets/') }}/switch/rcswitcher.css">
<link rel="stylesheet" href="{{ asset('/assets/') }}/alert/pnotify.css">
<link rel="stylesheet" href="{{ asset('/assets/') }}/alert/sweetalert.css">
<link rel="stylesheet" href="{{ asset('/assets/') }}/alert/sweet-alert-animations.css">
<div class="row" style="min-height: 500px">
<div class="col-md-10 col-md-offset-1"> 
<div class="panel panel-default" style="">
    <!-- Default panel contents -->
    <div class="panel-heading"></div>
        <header class="panel-heading" style="height:50px;">
            <div class="pull-left">
                {{$title}}
            </div>
            <div>
                 @if(\Auth::user()->utype==1)
                    <a href="{{ url('admin/payroll') }}" class="btn btn-sm btn-info pull-right"><i class="fa fa-arrow-left"></i> Back</a> <br><br>
                @endif
            </div>
        </header>
    <div class="panel-body">
        <div class="col-md-4 text-center">
            <b>Name : </b> {{$emp->name}}
        </div>
        <div class="col-md-4 text-center">
            <b>Designation : </b> {{$emp_details->designation->name}}
        </div>
        <div class="col-md-4 text-center">
            <b>Grade : </b> {{$emp_details->grade->name}}
        </div>
        <br/>
        <hr/>

        <div class="clearfix"></div>
        <table class="table table-bordered " id="example">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Month of Salary</th>
                    <th>Payment Date</th>
                    <th class="text-right">Total Salary</th>
                    <th class="text-right">Paid</th>
                    <th class="text-right">Due</th>
                    <th style="text-align: center;">Status</th>
                </tr>
            </thead>
            <tbody>
            @if($all)
            <?php $i=1; $total_due=0;?>
            @foreach($all as $row)
                <tr>
                    <td>{{ $i++ }}</td>
                    <td>{{ date("M Y", strtotime(@$row->date)) }}</td>
                    <td>
                        @if($row->paid_amount >0)
                        {{ date("d M Y", strtotime(@$row->updated_at)) }}</td>
                        @else
                        N/A
                        @endif
                    <td class="text-right"> 
                        <span>{{ number_format( @$row->gross_amount,2) }} </span>
                    </td>
                    <td class="text-right"> 
                        <span>{{ number_format( @$row->paid_amount,2) }} </span>
                    </td>
                    <td class="text-right"> 
                        <span>{{ number_format( $total_due = @$row->gross_amount - @$row->paid_amount,2) }} </span>
                    </td>
                    <td class="text-center">
                        @if($total_due <= 0)
                        <label class="label label-success">Paid</label>
                        @else
                        <label class="label label-info">Due</label>
                        @endif
                        
                        <a href="{{ url('admin/payroll/receipt/') }}/{{$emp->id}}/{{ $row->id }}" class="btn btn-info btn-sm @if($row->paid_amount <=0) disabled @endif " data-toggle='modal' data-target='#modalPreview' style="padding: 1px 5px;font-size: 12px;">Receipt</a> 
                                         
                    </td>
                    
                </tr>
            @endforeach

            @endif
            </tbody>
        </table>
    </div>

</div>
</div>
</div>

<div class="modal fade" id="modalPreview">
    <div class="modal-dialog" style='width: 70%;'>
    
    </div>
</div>
<div id"statusmsg">
    
</div>
@stop

@section('style')
<style>
    .modal-dialog {
      width: 70% !important;
      height: 70% !important;
    }

    .modal-content {
      height: auto;
      min-height: 70% !important;
      border-radius: 0;
    }
</style>
@stop

@section('script')
<script src="{{ asset('/assets/') }}/js/jquery.dataTables.min.js"></script>
<script src="{{ asset('/assets/') }}/js/dataTables.bootstrap.min.js"></script>
<script src="{{ asset('/assets/') }}/switch/rcswitcher.js"></script>
<script src="{{ asset('/assets/') }}/alert/sweetalert.min.js"></script>
<script src="{{ asset('/assets/') }}/alert/pnotify.js"></script>
<script src="{{ asset('/assets/') }}/alert/notify.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();
    $("input[type='checkbox']").rcSwitcher();
});

$(document).ready(function() {
    $('body').on('hidden.bs.modal', '.modal', function () {
      $(this).removeData('bs.modal');
    });
    var table=$("#example").DataTable({
         "searching": true,
         "lengthChange": true,
         "ordering": true,
         stateSave: true       
    });
});
</script>
@stop
@if(Session::has('msg'))
    <div class="alert alert-success center-block msg_alt" >
        <a class="close" data-dismiss="alert" href="#">&times;</a>
        <strong><i class="fa fa-check"></i></strong>&nbsp;
    {{Session::get('msg')}}
    </div>
@endif