@extends('payroll.employee_frontend.layouts.employee')
@section('custom_style')

@endsection
@section('content')

<section>
    <div class="col-12 mt-4">
      <h2 class="page-title text-center">Create loan Application</h2>
      <div class="mb-2 heading-border"></div>
    </div>
  </section>
  <section class="px-3  pt-3 pt-lg-5 row">

    <div class="col-12 mb-4">
      <div class="blu-card d-flex flex-wrap">

          <div class="col-12">
               @if (session('success'))
                <div class="alert alert-success" id="hide-alert">
                    {{ session('success') }}
                </div>
              @endif
              @if ($errors->any())
                  <div class="alert alert-danger" id="hide-alert">
                      <ul>
                          @foreach ($errors->all() as $error)
                              <li>{{ $error }}</li>
                          @endforeach
                      </ul>
                  </div>
              @endif
          </div>



        <form class="leave-form col-12 col-md-6 border-right" action="{{route('employee.loan.store')}}" method="post">
          @csrf
            <div class="d-flex flex-wrap">


              <div class="form-group col-12 col-md-6">
                <label for="exampleInputEmail1">Amount</label>
                <input required id="amount" name="amount" class="form-control" type="number">
              </div>
              <div class="form-group col-12 col-md-6">
                <label for="exampleInputEmail1">No. of installment</label>
                <input required id="installment_no" name="installment_no" class="form-control" type="number">
              </div>
              <div class="form-group col-12 col-md-6">
                <label for="exampleInputEmail1">Installment ammount</label>
                <input readonly id="installment_amount" name="installment_amount" class="form-control" type="number">
              </div>

              <div class="form-group col-12">
                <label for="exampleInputEmail1">Purpose</label>
                <textarea required placeholder="enter your loan reason" class="form-control" name="purpose" id="" cols="30" rows="3"></textarea>
              </div>
              <div class="form-group col-12">
                <label for="exampleInputEmail1">Note</label>
                <textarea placeholder="if any (optional)" class="form-control" name="note" id="" cols="30" rows="3"></textarea>
              </div>

              <input type="hidden" name="emp_id" value="1">
              <input type="hidden" name="type" value="2">


              <div class="form-group col-12">
                <input class="btn btn-success px-4" type="submit" value="Create">
              </div>
            </div>
          </form>
          <div class="col-md-6 col-12 px-md-0">

            <table class="table" id="resultApplist">
                <thead>
                    <tr>
                        <th scope="col">Date</th>
                        <th scope="col">Amount</th>
                        <th scope="col">Due</th>
                        <th scope="col">Status</th>
                    </tr>
                </thead>
                <tbody id="loan_body">
                  @foreach ($loan_history as $lh)
                  <tr>
                    <td>{{$lh->application_date}}</td>
                    <td>{{$lh->amount}}</td>
                    <td>{{$lh->amount - $lh->total_installment_amount}}</td>
                    <td> <span class="badge badge-success" >Active</span> </td>
                  </tr>
                  @endforeach

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



        </div>
    </div>

  </section>


@endsection

@section('script')
    <script>

    $("#installment_no").blur(function(){
      let amount = $("#amount").val();
      let insno = $("#installment_no").val();
      const ia = amount / insno ;

      $("#installment_amount").val(Math.round(ia));

      });

      $("#amount").blur(function(){
    let amount = $("#amount").val();
    let insno = $("#installment_no").val();
    const ia = amount / insno ;

    $("#installment_amount").val(Math.round(ia));

    });

    </script>
@endsection