@extends('layouts.masterHome2')

@section('content')

     

    <div class="row" style="margin:20px">
          <div class="col-md-3 col-sm-6 col-12">
            <div class="info-box">
 
              <div class="info-box-content" style="height: 100px;">
                <span class="info-box-text  bg-info" style="border-radius: 6px;height: 40px;display: flex;justify-content: center;align-items: center;"> <b style="font-size:22px"> الميزانية</b> </span>
                <span class="info-box-number" style="text-align:center">{{$budget->name}}</span>
              </div>
              <!-- /.info-box-content -->
            </div>
            <!-- /.info-box -->
          </div>

          <div class="col-md-3 col-sm-6 col-12">
            <div class="info-box">
              

              <div class="info-box-content" style="height: 100px;">
                <span class="info-box-text bg-warning" style="border-radius: 6px;height: 40px;display: flex;justify-content: center;align-items: center;"><b style="font-size:22px"> المبلغ الأساسي  </b></span>
                <span class="info-box-number" style="text-align:center">{{$budget->amount}}</span>
              </div>
              <!-- /.info-box-content -->
            </div>
            <!-- /.info-box -->
          </div>

          <!-- /.col -->
          <div class="col-md-3 col-sm-6 col-12">
            <div class="info-box">
               

              <div class="info-box-content" style="height: 100px;">
                <span class="info-box-text bg-success" style="border-radius: 6px;height: 40px;display: flex;justify-content: center;align-items: center;"><b style="font-size:22px">المبلغ المؤقت</b></span>
                <span class="info-box-number" style="text-align:center">{{$budget->temp_amount}}</span>
              </div>
              <!-- /.info-box-content -->
            </div>
            <!-- /.info-box -->
          </div>
          <!-- /.col -->
          <div class="col-md-3 col-sm-6 col-12">
            <div class="info-box">
              <div class="info-box-content" style="height: 100px;">
                <span class="info-box-text bg-success" style="border-radius: 6px;height: 40px;display: flex;justify-content: center;align-items: center;"><b style="font-size:22px">الفرع</b></span>
                <span class="info-box-number" style="text-align:center">{{$budget->branch->name}}</span>
              </div>
              <!-- /.info-box-content -->
            </div>
            <!-- /.info-box -->
          </div>
          <!-- /.col -->
          
          <div class="col-md-3 col-sm-6 col-12">
            <div class="info-box">
              <div class="info-box-content" style="height: 100px;">
                <span class="info-box-text bg-danger" style="border-radius: 6px;height: 40px;display: flex;justify-content: center;align-items: center;"><b style="font-size:22px">الاستهلاك</b></span>
                <span class="info-box-number" style="text-align:center">{{$total_pay ? $total_pay :"0"}}</span>
              </div>
              <!-- /.info-box-content -->
            </div>
            <!-- /.info-box -->
          </div>

          <div class="col-md-3 col-sm-6 col-12">
            <div class="info-box">
              <div class="info-box-content" style="height: 100px;">
                <span class="info-box-text bg-danger" style="border-radius: 6px;height: 40px;display: flex;justify-content: center;align-items: center;"><b style="font-size:22px">المتبقي</b></span>
                <span class="info-box-number" style="text-align:center">{{$budget->amount + $budget->temp_amount - $total_pay}}</span>
              </div>
              <!-- /.info-box-content -->
            </div>
            <!-- /.info-box -->
          </div>


          <div class="col-md-3 col-sm-6 col-12">
            <div class="info-box">
              <div class="info-box-content" style="height: 100px;">
                <span class="info-box-text bg-info" style="border-radius: 6px;height: 40px;display: flex;justify-content: center;align-items: center;"><b style="font-size:22px">الشهر الحالي</b></span>
                <span class="info-box-number" style="text-align:center">{{$current_month_name}}</span>
              </div>
              <!-- /.info-box-content -->
            </div>
            <!-- /.info-box -->
          </div>


          <!-- /.col -->
        </div>
    
    <div class="card">
               
              <!-- /.card-header -->
              <div class="card-body">
                <table  class="table table-bordered table-striped">
                  <thead>
                  
                 <tr >
                  <th style="text-align:center;vertical-align: middle;background-color:#2C4E71;color:#FFF;border-color:#0000003c;border-width: 2px;"> رقم سند الصرف   </th>
                  <th style="text-align:center;vertical-align: middle;background-color:#2C4E71;color:#FFF;border-color:#0000003c;border-width: 2px;"> نوع السند    </th>

                  <th style="text-align:center;vertical-align: middle;background-color:#2C4E71;color:#FFF;border-color:#0000003c;border-width: 2px;"> المبلغ   </th>
                  

                  <th style="text-align:center;vertical-align: middle;background-color:#2C4E71;color:#FFF;border-color:#0000003c;border-width: 2px;"> يصرف الي  </th>
                  <th style="text-align:center;vertical-align: middle;background-color:#2C4E71;color:#FFF;border-color:#0000003c;border-width: 2px;"> طريقة الدفع  </th>
                  <th style="text-align:center;vertical-align: middle;background-color:#2C4E71;color:#FFF;border-color:#0000003c;border-width: 2px;"> نظير  </th>
                  <th style="text-align:center;vertical-align: middle;background-color:#2C4E71;color:#FFF;border-color:#0000003c;border-width: 2px;"> الحالة  </th>
                  <th style="text-align:center;vertical-align: middle;background-color:#2C4E71;color:#FFF;border-color:#0000003c;border-width: 2px;"> ملاحظات  </th>

                </tr>
                 </thead>
              <tbody>
                           
                @foreach( $sendats as $sand )   
                 
                <tr>
                 
                  <td style="text-align:center; word-break: break-word; font-weight:900;border-color:#0000003c;font-size:18px" ># {{$sand->id}} </td>
                  <td style="text-align:center; word-break: break-word; font-weight:900;border-color:#0000003c;font-size:18px" >سند صرف مربوط بميزانية</td>
                  <td style="text-align:center; word-break: break-word; font-weight:900;border-color:#0000003c;font-size:18px" >{{$sand->pay}} </td>
                  <td style="text-align:center; word-break: break-word; font-weight:900;border-color:#0000003c;font-size:18px" >{{$sand->general_name}} </td>
                  <td style="text-align:center; word-break: break-word; font-weight:900;border-color:#0000003c;font-size:18px" >{{$sand->safe_account->payment_method->name}} </td>
                  <td style="text-align:center; word-break: break-word; font-weight:900;border-color:#0000003c;font-size:18px" >{{$sand->budget->name}} </td>
                  
                  @if ( $sand->approve == "Waiting" )
                  <td style="text-align:center; word-break: break-word; font-weight:900;border-color:#0000003c;font-size:18px; background-color:orange" > Waiting...</td>
                  @elseif ( $sand->approve == "Approved" )
                  <td style="text-align:center; word-break: break-word; font-weight:900;border-color:#0000003c;font-size:18px;background-color:green;color:#FFF" >  Approved </td>
                  @else
                  <td style="text-align:center; word-break: break-word; font-weight:900;border-color:#0000003c;font-size:18px;background-color:red" >  Rejected </td>
                  @endif 

                  <td style="text-align:center; word-break: break-word; font-weight:900;border-color:#0000003c;font-size:18px" >{{$sand->note2}} </td>
  

                </tr>
               @endforeach
                </tbody>
                </table>
              </div>
              <!-- /.card-body -->
            </div>  

@endsection
