@extends('layouts.app')
@section('style')
    <link rel="stylesheet" href="{{url('vue/select2/select2.min.css')}}">
    <style>
      
  @media print{
      .printable{
          border: solid 1px gray !important;
          text-align: center !important;
      }
  }
        .myclass{
            direction: ltr;
            text-align:left !important;

        }
        .td{
            text-alighn:left !important;
        }
    </style>
    @stop
    @section('content')

<div class="portlet light bg-inverse myclass">
     <h1 align="center">سند پرداخت  معاش(SV)</h1>

    <div class="invoice">
        <div class="row invoice-logo">
            <div class="col-xs-6 invoice-logo-space">
                <img src="../assets/pages/media/invoice/walmart.png" class="img-responsive" alt="img not avilable" /> </div>
                <div class="col-xs-6">
                 <!--<span class="bold uppercase">CHACOInc.</span>
                 <br/> 25, Lorem Lis Street, Orange C
                 <br/> California, US
                 <br/>
                 <span class="bold">T</span> 1800 123 456
                 <br/>
                 <span class="bold">E</span> support@keenthemes.com
                 <br/>
                 <span class="bold">W</span> wwwcom </div>-->
             </div>
         </div>

         <div class="row">
             <div class="col-xs-12">
                 <table style="width: 100%; margin-bottom: 10px;">

                    <tr class="myclass">
                        <th style="text-align: left; width:20%"> نمبرپرداخت:  </th>
                        <td style="text-align: left; width:30%">{{$payments->id}}</td>
                        
                        <th style="text-align: left; width:20%">تاریخ: </th>
                        <td style="text-align: left; width:30%">{{convertDate($payments->Date)}}</td>
                        



                    </tr>
                    <tr class="myclass">
                        `<th style="text-align: left; width:20%">نام مشتری:</th>
                        <td style="text-align: left; width:30%">{{$payments->member}}</td>
                        
                        <th style="text-align: left; width:20%">کود:</th>
                        <td style="text-align: left; width:30%">{{$payments->code}}</td>
                        
                        

                    </tr>


                </table>
            </div> 
        </div>
        <div class="row">
            <div class="col-xs-12">
                <table style="width: 100%; margin-bottom: 10px;" class = "printable">
                    <thead>
                        <tr class = "printable">
                            <th class = "printable"> اسعار </th>                        
                            <th class = "printable"> دریافتی </th>
                            <th class = "printable"> پرداختنی </th>

                        </tr>
                    </thead>
                    <tbody>
                     @foreach(memberBalance($payments->member_id) as $key )
                 <tr class = "printable">
                      <td class = "printable">
                         {{$key['currency']}}
                      </td>
                      <td class = "printable">
                        {{$key['receivable']}}
                      </td>
                      <td class = "printable"> 
                         {{$key['payable']}}
                      </td>
                      
                    
                      
                </tr>
            @endforeach

                    </tbody>
                </table>
            </div>
        </div>

        <div class="row">
         <div class="col-xs-12">
             <table style="width: 100%; margin-bottom: 10px;">

                <tr>
                    <th style="text-align: left; width:20%">مقدار:</th> 
                    <td style="text-align: left; width:30%">{{$payments->Amount}} {{$payments->currency}}</td>
                    
                    <th style="text-align: left; width:20%">دریافت کننده:</th>
                    <td style="text-align: left; width:30%">{{$payments->member}}</td>
                    
                         
                </tr>
                <tr>
                 <th style="text-align: left; width:20%">حسابدار:</th> 
                 <td style="text-align: left; width:30%">{{$user}}</td>
                 
                 <th style="text-align: left; width:20%">جزءیات:</th>
                 <td style="text-align: left; width:30%">{{$payments->description}}</td>
                 
              
             </tr>



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



 <div class="row">
    <div class="col-xs-12">
        <table style="width: 100%; margin-bottom: 10px;" class = "printable">
            <thead>
                <tr class = "printable">
                    <th class = "printable"> تهیه کننده </th>
                    <th class = "printable"> چک کننده  </th>
                    <th class = "printable"> قبول کننده </th>
                    <th colspan="3" class = "printable"> </th>
                </tr>
            </thead>
            <tbody>
               <tr class = "printable">
                   <td rowspan="4" class = "printable"></td>
                   <td rowspan="4" class = "printable"></td>
                   <td rowspan="4" class = "printable"></td>
                   <td class = "printable"> دریافت</td>
                   <td class = "printable"> {{$payments->Amount}} {{$payments->currency}}</td>
                   <td rowspan="4" class = "printable"></td>
               </tr>
               <tr class = "printable">
                <td colspan="2" class = "printable">امضا</td>
            </tr>
            <tr class = "printable">
                <td class = "printable">نام</td>
                <td class = "printable">{{$payments->member}}</td>
            </tr>
            <tr class = "printable">
                <td colspan="2" class = "printable"></td>
            </tr>
        </tbody>
    </table>
</div>
</div>

   <script>
        window.print();
    </script>
</div>
</div>
</div>    

@endsection