@extends('layouts.thema')

@section('content')

<div class="row">
  <div class="col-12 mb-3">
      <h5>
          Saldo Per Sekolah
      </h5>
  </div>
  @foreach($school as $a)
  <div class="col-md-3">
      <div class="card school-card">
          <div class="card-body text-center">
              <i class="ti ti-building-bank stat-icon {{$a->color}} mb-2"></i>
              <div class="school-name">{{$a->name}}</div>
              <div class="school-balance">Rp {{ number_format($a->saldo, 0, ',', '.') }}</div>
          </div>
      </div>
  </div>
  @endforeach
</div>

      <div class="container-fluid">
        <div class="card">
          <div class="card-body">
            <div style="float: right;">
              <a href="" class="btn btn-outline-primary btn-sm" data-toggle="modal" data-target="#exampleModal">+ Tambah Saldo</a>
            </div>
            <h5 class="card-title fw-semibold mb-4">Data History Saldo Masuk</h5>
            <table id="myTable" class="table table-striped table-bordered" style="width:100%">
                <thead>
                    <tr>
                        <th>No</th>
                        <th>Tanggal</th>
                        <th>Nama Sekolah</th>
                        <th width="85">Nominal</th>
                        <th>Deskripsi</th>
                        <th>User Input</th>
                    </tr>
                </thead>
                <tbody>
                  @foreach($data as $b)
                  <tr>
                    <td>{{$loop->iteration}}</td>
                    <td>{{$b->created_at}}</td>
                    <td>{{$b->school->name}}</td>
                    <td>Rp {{ number_format($b->amount, 0, ',', '.') }}</td>
                    <td>{{$b->description}}</td>
                    <td>{{$b->input_by->name}}</td>
                  </tr>
                  @endforeach
                </tbody>
            </table>

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


    <!-- Modal add-->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
        <form action="{{url('keuangan/spp/add')}}" method="post">
        @csrf
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Input Saldo</h5>
            <button type="button" class="close btn btn-dark btn-sm" data-dismiss="modal" aria-label="Close">x</button>
          </div>
          <div class="modal-body">

            <div class="form-group mb-3 row">
              <label for="school_id" class="col-sm-3 col-form-label">Nama Sekolah</label>
              <div class="col-sm-9">
                <select id="school_id" name="school_id" class="form-control" required>
                  <option disabled selected>-- Pilih --</option>
                  <option value="1">TKIT Al Istiqomah</option>
                  <option value="2">MI Al Istiqomah</option>
                  <option value="3">SDIT Al Istiqomah 1</option>
                  <option value="4">SDIT Al Istiqomah 2</option>
                </select>
              </div>
            </div>

            <div class="form-group mb-3 row">
              <label for="amount" class="col-sm-3 col-form-label">Nominal</label>
              <div class="col-sm-9">
                  <div class="input-group">
                      <span class="input-group-text">Rp</span>
                      <input type="text" class="form-control" id="amount" name="amount" required>
                  </div>
              </div>
            </div>

            <div class="form-group mb-3 row">
              <label for="description" class="col-sm-3 col-form-label">Deskripsi</label>
              <div class="col-sm-9">
                <textarea class="form-control" name="description" id="description" rows="3" required></textarea>
              </div>
            </div>

          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="submit" class="btn btn-primary">Add</button>
          </div>
        </form>
        </div>
      </div>
    </div>


<script>
document.getElementById('amount').addEventListener('keyup', function(e) {
    let value = this.value.replace(/[^,\d]/g, '');

    this.value = new Intl.NumberFormat('id-ID').format(value);
});
</script>

@endsection