@extends('client.layouts.app')
@section('title',' تعديل سلفة إلي '.$employee->name )
@section('content')
<div class="app-content content ">
    <div class="content-overlay"></div>
    <div class="header-navbar-shadow"></div>
    <div class="content-wrapper container-xxl p-0">
      <div class="content-header row">
        <div class="content-header-left col-md-9 col-12 mb-2">
          <div class="row breadcrumbs-top">
            <div class="col-12">
              <h2 class="content-header-title float-start mb-0">
                تعديل سلفة إلي {{$employee->name}}
              </h2>
              <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                  <li class="breadcrumb-item"><a href="{{route('client.home')}}">لوحة التحكم</a>
                  </li>
                  <li class="breadcrumb-item"><a href="{{route('client.employees.index')}}">الموظفين</a>
                  </li>
                  <li class="breadcrumb-item active">{{$employee->name}}
                  </li>
                  <li class="breadcrumb-item active">السلف
                </li>
                <li class="breadcrumb-item active">{{$employee_borrow->id}}
                </li>
                <li class="breadcrumb-item active">تعديل
                </li>
                </ol>
              </div>
            </div>
          </div>
        </div>
        <div class="content-header-right text-md-end col-md-3 col-12 col-12 d-md-block d-none">
            <div class="mb-1 breadcrumb-right">
                <div class="dropdown">
                  @can('قائمة الموظفين')
                    <a  href="{{ route('client.employees.index') }}">
                        <button class="btn-icon btn btn-primary" type="button"><i data-feather='eye'> </i></button>
                    </a>
                    @endcan
                </div>
              </div>
        </div>
      </div>
      <div class="content-body">
        <!-- Basic Horizontal form layout section start -->
        <!-- Basic multiple Column Form section start -->
<section id="multiple-column-form">
<div class="row">
  <div class="col-12">
    <div class="card">
      <div class="card-header">

        <h4 class="card-title">البيانات الاساسية</h4>
        <h4><button class="btn-icon btn btn-{{$employee_borrow->safe_id ? 'danger':'primary'}} waves-effect waves-float waves-light" type="button" id="changeType">{{$employee_borrow->safe_id ? 'دفع بنكي' : 'دفع نقدي'
        }}</button></h4>

      </div>

      <div class="card-body">
        <form class="parsley-style-1" id="addForm"enctype="multipart/form-data"method="post">
      @csrf
      <input type="hidden" name="id" value="{{$employee_borrow->id}}">
      <input type="hidden" name="company_id" value="{{$company_id}}">

      
      <div class="row ">
          <div class="col-md-4 col-12">
            <div class="mb-1">
              <b> اسم الموظف </b>
              <select  name="employee_id" id="employee_id" class="form-control" readonly>
                      <option value="{{$employee->id}}">{{$employee->name}}</option>
              </select>
              <center><span id="balance" style="font-size:15px"> الرصيد :  @if($employee->balance > 0 )    له  {{number_format($employee->balance)}} @elseif($employee->balance < 0)   علية  {{number_format(abs($employee->balance))}} @else 0 @endif</span></center>
            </div>
          </div>
          <div class="col-md-4 col-12">
            <div class="mb-1">
              <b> تاريخ السلفة </b>
              <input required class="form-control" value="{{$employee_borrow->date}}"  name="date" type="date">
              </div>
          </div>
          <div class="col-md-4 col-12">
            <div class="mb-1">
              <b>  قيمة السلفة </b>
              <input   class="form-control" name="amount" type="number" step="any" placeholder="قيمة السلفة" value="{{abs($employee_borrow->amount)}}" >
            </div>
          </div>


        <div class="col-md-4 col-12" id="safe" @if(empty($employee_borrow->safe_id)) style="display:none;" @endif>
          <div class="mb-1">
              <b class="form-label"> خزنة الدفع </b>
          <select  name="safe_id" class="form-control" id="safe_id">
              <option value="">اختر خزنة الدفع</option>
              @foreach($safes as $safe)
              <option
                  @if($employee_borrow->safe_id == $safe->id)
                  selected
                  @endif
                  value="{{$safe->id}}">{{$safe->safe_name}}</option>
          @endforeach
          </select>
          </div>
      </div>

      <div class="col-md-4 col-12" id="bank" @if(empty($employee_borrow->bank_id)) style="display:none;" @endif>
        <div class="mb-1">
            <b class="form-label"> بنك الدفع </b>
        <select  name="bank_id" class="form-control" id="bank_id">
            <option value="">اختر بنك الدفع</option>
            @foreach($banks as $bank)
            <option
                @if($employee_borrow->bank_id == $bank->id)
                selected
                @endif
                value="{{$bank->id}}">{{$bank->bank_name}}</option>
        @endforeach
        </select>
        </div>
    </div>
          <div class="col-md-4 col-12">
            <div class="mb-1">
              <b> ملاحظات </b>
              <input  class="form-control" name="notes" type="text" placeholder="ملاحظات" value="{{$employee_borrow->notes}}" >
            </div>
          </div>
      </div>
      <div class="col-12" align="center">
        <br>
          <button type="submit" class="btn btn-success me-1">تحديث</button>
          <button type="button" class="btn btn-outline-danger" onclick="window.history.back()">رجوع</button>
        </div>
      </div>
  </form>
      </div>
    </div>
  </div>
</div>
</section>
<!-- Basic Floating Label Form section end -->

      </div>
    </div>
  </div>
  <!-- END: Content-->
@endsection
@section('script')
<script src="{{asset('app-assets/js/jquery.dataTables.min.js')}}"></script>
<script src="{{asset('app-assets/js/dataTables.bootstrap5.min.js')}}"></script>
<script src="{{asset('app-assets/js/sweetalert.min.js')}}"></script>
<script>
        $('#changeType').on('click', function () {
        var type = $(this).text();
        if (type == 'دفع بنكي') {
          $(this).text('دفع نقدي');
          $('#bank').show();
          $('#safe').hide();
          $('#safe_id').val('');
          $(this).attr('class', 'btn-icon btn btn-primary waves-effect waves-float waves-light');


          } else {
          $(this).text('دفع بنكي');
          $('#bank').hide();
          $('#safe').show();
          $('#bank_id').val('');
          $(this).attr('class', 'btn-icon btn btn-danger waves-effect waves-float waves-light');
        }
      });

    $(function () {
      $("#example2").DataTable();
     
    });
   $('#example2').DataTable({"language": { "url": "{{asset('app-assets/data/locales/Arabic.json')}}"}}); 

   
   
        var selectForm = $('#addForm');

if (selectForm) {
    selectForm.validate({

        rules: {
      'employee_id': {
        required: true,
      },
      'amount': {
        required: true
      },
      'amount': {
        required: true
      },
      'safe_id': {
        required: true
      },
      'date': {
        required: true
      }
    
    
    }
  });
}

$("#addForm").on('submit',(function(e) {

e.preventDefault();

$.ajax({

  url: "{{route('employees.borrow.update')}}",

  type: "POST",

  data:  new FormData(this),

  dataType:  'json',

  contentType: false,

  cache: false,

  processData:false,
  
  beforeSend : function (){var ifConnected = window.navigator.onLine;if (!ifConnected) {toastr.info("يتم الآن إعادة الإتصال","لا يوجد إتصال بالإنترنت",{positionClass: "toast-top-right",tapToDismiss: !1,timeOut: 2e3,rtl: $("html").attr("data-textdirection")});}},

  success: function(response) {

    if(response.status){

            toastr.success("",response.message,{
			positionClass: "toast-top-right",
			tapToDismiss: !1,
			timeOut: 2e3,
			rtl: $("html").attr("data-textdirection")
		    });      
            // document.getElementById("addForm").reset();

    }else{
        toastr.warning("",response.message,{
			positionClass: "toast-top-right",
			tapToDismiss: !1,
			timeOut: 2e3,
			rtl: $("html").attr("data-textdirection")
		    });   
    } 

  },
  error: function(response){
          $.each(response.responseJSON.errors, function (key, item) 
          {
            toastr.error("",item,{
			positionClass: "toast-top-right",
			tapToDismiss: !1,
			timeOut: 2e3,
			rtl: $("html").attr("data-textdirection")
		    });

          });
  },

 });

}));

        </script>
@endsection

