@extends('layouts.thema')

@section('content')
      <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 Data</a>
            </div>
            <h5 class="card-title fw-semibold mb-4">Data Pengajuan Pengadaan Barang Sekolah {{auth()->user()->school->name}}</h5>
            <table id="myTable" class="table table-striped table-bordered" style="width:100%">
                <thead>
                    <tr>
                        <th>No</th>
                        <th>Nama Barang</th>
                        <th>Deskripsi</th>
                        <th width="85">Nominal</th>
                        <th>Status</th>
                        <th>Prioritas</th>
                        <th width="89">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                  @foreach($data as $a)
                    <tr>
                      <td>{{$loop->iteration}}.</td>
                      <td>{{$a->name}}</td>
                      <td>{{$a->description}}</td>
                      <td>Rp {{ number_format($a->amount, 0, ',', '.') }}</td>
                      <td>
                        @if($a->status=='APPROVED')
                          <span class="badge bg-primary rounded-3 fw-semibold">{{$a->status}}</span>
                        @elseif($a->status=='REJECTED')
                          <span class="badge bg-danger rounded-3 fw-semibold">{{$a->status}}</span>
                        @else
                          <span class="badge bg-dark rounded-3 fw-semibold">{{$a->status}}</span>
                        @endif
                      </td>
                      <td>
                        @if($a->priority=='MEDIUM')
                          <span class="badge bg-primary rounded-5 fw-semibold">{{$a->priority}}</span>
                        @elseif($a->priority=='HIGH')
                          <span class="badge bg-danger rounded-5 fw-semibold">{{$a->priority}}</span>
                        @else
                          <span class="badge bg-warning rounded-5 fw-semibold">{{$a->priority}}</span>
                        @endif
                      <td>
                        @if($a->status=='PENDING')
                        <a href="{{url('kepsek/pengajuan/del/'.$a->id)}}" class="btn btn-outline-danger btn-sm" onclick="return confirm('Yakin ingin menghapus data ini?')"><i class="ti ti-trash fs-3"></i></a>
                        <button type="submit" class="btn btn-outline-primary btn-sm" data-toggle="modal" data-target="#editModal{{$a->id}}"><span><i class="ti ti-edit fs-3"></i></span></button>
                        <button type="submit" class="btn btn-outline-success btn-sm" data-toggle="modal" data-target="#viewModal{{$a->id}}"><span><i class="ti ti-list-check fs-3"></i></span></button>
                        @else
                        <button type="submit" class="btn btn-outline-success btn-sm" data-toggle="modal" data-target="#viewModal{{$a->id}}"><span><i class="ti ti-list-check fs-3"></i></span></button>
                        @endif
                      </td>
                    </tr>


                    <!-- Modal edit-->
                    <div class="modal fade" id="editModal{{$a->id}}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                      <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                        <form action="{{url('kepsek/pengajuan/edit')}}" method="post">
                        @csrf
                        <input type="hidden" name="id" value="{{$a->id}}">
                          <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">Edit Data Pengajuan</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="name" class="col-sm-3 col-form-label">Nama Barang</label>
                              <div class="col-sm-9">
                                <input type="text" class="form-control" id="name" name="name" value="{{$a->name}}" required>
                              </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>{{$a->description}}</textarea>
                              </div>
                            </div>

                            <div class="form-group mb-3 row">
                              <label for="amount_edit" 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_edit" name="amount" value="{{$a->amount}}" required>
                                  </div>
                              </div>
                            </div>

                            <div class="form-group mb-3 row">
                              <label for="priority" class="col-sm-3 col-form-label">Prioritas</label>
                              <div class="col-sm-9">
                                <select id="priority" name="priority" class="form-control" required>
                                  <option value="HIGH" {{$a->priority=='HIGH'?'selected':''}}>HIGH</option>
                                  <option value="MEDIUM" {{$a->priority=='MEDIUM'?'selected':''}}>MEDIUM</option>
                                  <option value="LOW" {{$a->priority=='LOW'?'selected':''}}>LOW</option>
                                </select>
                              </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">Update</button>
                          </div>
                        </form>
                        </div>
                      </div>
                    </div>


                    <!-- Modal view-->
                    <div class="modal fade" id="viewModal{{$a->id}}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                      <div class="modal-dialog modal-lg">
                        <div class="modal-content">

                          <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">Detail Data Pengajuan</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="row">
                              <b class="col-sm-3">Nama Barang</b>
                              <p class="col-sm-1">:</p>
                              <p class="col-sm-8">{{$a->name}}</p>
                            </div>

                            <div class="row">
                              <b class="col-sm-3">Deskripsi</b>
                              <p class="col-sm-1">:</p>
                              <p class="col-sm-8">{{$a->description}}</p>
                            </div>

                            <div class="row">
                              <b class="col-sm-3">Nominal</b>
                              <p class="col-sm-1">:</p>
                              <p class="col-sm-8">Rp {{ number_format($a->amount, 0, ',', '.') }}</p>
                            </div>

                            <div class="row">
                              <b class="col-sm-3">Nominal</b>
                              <p class="col-sm-1">:</p>
                              <p class="col-sm-8">
                                @if($a->status=='APPROVED')
                                  <span class="badge bg-primary rounded-3 fw-semibold">{{$a->status}}</span>
                                @elseif($a->status=='REJECTED')
                                  <span class="badge bg-danger rounded-3 fw-semibold">{{$a->status}}</span>
                                @else
                                  <span class="badge bg-dark rounded-3 fw-semibold">{{$a->status}}</span>
                                @endif
                              </p>
                            </div>

                            <div class="row">
                              <b class="col-sm-3">Prioritas</b>
                              <p class="col-sm-1">:</p>
                              <p class="col-sm-8">
                                @if($a->priority=='MEDIUM')
                                  <span class="badge bg-primary rounded-5 fw-semibold">{{$a->priority}}</span>
                                @elseif($a->priority=='HIGH')
                                  <span class="badge bg-danger rounded-5 fw-semibold">{{$a->priority}}</span>
                                @else
                                  <span class="badge bg-warning rounded-5 fw-semibold">{{$a->priority}}</span>
                                @endif
                              </p>
                            </div>

                            <hr>
                            <div class="row">
                              <b class="col-sm-3">Validator</b>
                              <p class="col-sm-1">:</p>
                              <p class="col-sm-8">{{ $a->approved->name ?? '-' }}</p>
                            </div>

                            <div class="row">
                              <b class="col-sm-3">Tgl Validasi</b>
                              <p class="col-sm-1">:</p>
                              <p class="col-sm-8">{{$a->approved_at}}</p>
                            </div>

                            <div class="row">
                              <b class="col-sm-3">Catatan</b>
                              <p class="col-sm-1">:</p>
                              <p class="col-sm-8">{{$a->approved_note}}</p>
                            </div>
                            @if($a->status=='APPROVED')
                              <hr>
                              <div class="row">
                                <b class="col-sm-3">Status Pembelian</b>
                                <p class="col-sm-1">:</p>
                                <p class="col-sm-8">
                                @if($a->buy_status=='PURCHASED')
                                  <span class="badge bg-primary rounded-5 fw-semibold">{{$a->buy_status}}</span>
                                @else
                                  <span class="badge bg-dark rounded-5 fw-semibold">{{$a->buy_status}}</span>
                                @endif
                                </p>
                              </div>

                              <div class="row">
                                <b class="col-sm-3">Pembeli</b>
                                <p class="col-sm-1">:</p>
                                <p class="col-sm-8">{{ $a->buying->name ?? '-' }}</p>
                              </div>

                              <div class="row">
                                <b class="col-sm-3">Tgl Pembelian</b>
                                <p class="col-sm-1">:</p>
                                <p class="col-sm-8">{{$a->buy_at}}</p>
                              </div>

                              <div class="row">
                              <b class="col-sm-3">Bukti Pembelian</b>
                              <p class="col-sm-1">:</p>
                              <p class="col-sm-8">@if($a->buy_file) <a href="{{asset('bukti/'.$a->buy_file)}}" target="_blank" class="btn btn-outline-primary btn-sm">Lihat Bukti</a> @endif</p>
                            </div>
                            @endif

                          </div>
                          <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                          </div>
                        </div>
                      </div>
                    </div>
                  @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('kepsek/pengajuan/add')}}" method="post">
        @csrf
        <input type="hidden" name="school_id" value="{{auth()->user()->school_id}}">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Tambah Data Pengajuan</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="name" class="col-sm-3 col-form-label">Nama Barang</label>
              <div class="col-sm-9">
                <input type="text" class="form-control" id="name" name="name" required>
              </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 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="priority" class="col-sm-3 col-form-label">Prioritas</label>
              <div class="col-sm-9">
                <select id="priority" name="priority" class="form-control" required>
                  <option disabled selected>-- Pilih --</option>
                  <option value="HIGH">HIGH</option>
                  <option value="MEDIUM">MEDIUM</option>
                  <option value="LOW">LOW</option>
                </select>
              </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);
});

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

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

@endsection