@extends('dashboard.base')

@section('content')
        <div class="container-fluid">
          @include('dashboard.shared.alert')
          <div class="row">
            <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12">
              <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                  <h5 class="m-0">Upload Daftar Potongan</h5>
                </div>
                <div class="card-body">
                  <div class="alert alert-secondary mt-0 mb-2" role="alert">
                    <p class="mb-0"><strong>Perhatian</strong></p>
                    <p class="my-0">Untuk proses upload daftar potongan ada terdapat beberapa hal yang perlu diperhatikan, yaitu:</p>
                    <ol>
                      <li>File yang boleh diupload adalah file dengan format excel (.xls atau .xlsx). Untuk contoh format dokumen dapat di download pada <a target="_blank" href="{{route('potongan.internal.download-draft')}}">link ini</a></li>
                      <li>Nomor Induk Pegawai (NIP) wajib diisi dengan menambahkan karakter petik (') di awal NIP agar memudahkan sistem dalam pembacaan NIP</li>
                      <li>Untuk kolom nominal diisi tanpa format tertentu. Contoh 1000000, bukan 1.000.000</li>
                      <li>Untuk kolom jangka waktu dan angsuran-ke diisi tanpa format tertentu. Contoh 12, bukan "12 bulan"</li>
                    </ol>
                  </div>
                  <form id="import-form" action="{{route('potongan.internal.upload')}}" enctype="multipart/form-data" method="POST">
                      {{ csrf_field() }}
                      <div class="row">
                        <div class="col-md-2 col-xs-12">
                          <select name="tahun" id="tahun" class="form-control filter" required>
                            <option value="" selected hidden disabled></option>
                            @for ($y = date('Y', strtotime('+1 year')); $y >= 2020; $y--)                              
                              <option value="{{ $y }}" {{ $request['tahun']||old('tahun') == $y ? 'selected' : ''}}>{{ $y }}</option>
                            @endfor
                          </select>
                        </div>
                        <div class="col-md-2 col-xs-12">
                          <select name="bulan" id="bulan" class="form-control filter" required>
                            <option value="" selected hidden disabled></option>
                            @foreach (config('constants.bulans') as $key=>$bulan)
                                <option value="{{$key}}" {{ $key == $request['bulan']||$key == old('bulan') ? 'selected' : ''}}>{{$bulan}}</option>
                            @endforeach
                          </select>
                        </div>
                        <div class="col-md-2 col-xs-12">
                          <select name="potongan_type_id" id="potongan_type_id" class="form-control filter" required>
                            <option value="" selected hidden disabled></option>
                            @foreach ($jenispotongans as $key=>$jenispotongan)
                                <option value="{{$jenispotongan->id}}" {{ $jenispotongan->id == $request['potongan_type_id']||$jenispotongan->id == old('potongan_type_id') ? 'selected' : ''}}>{{$jenispotongan->name}}</option>
                            @endforeach
                          </select>
                        </div>
                        <div class="col-md-4 col-xs-12">
                          <input type="file" name="file" id="file" class="form-control" accept=".xls,.xlsx" required>
                        </div>
                        <div class="col-md-2 col-xs-12">
                          <button type="submit" id="btn-upload" class="btn btn-primary btn-block">Submit</button>
                        </div>
                      </div>
                  </form>
                </div>
              </div>
            </div>
          </div>
          @if ($showData)    
          <div class="animated fadeIn">
            <div class="row">
              <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                      <h5 class="m-0">Daftar Potongan</h5>
                    </div>
                    <div class="card-body">
                        <h5 class="text-center"><b>Periode {{ config('constants.bulans.'.$request['bulan']) }} {{ $request['tahun'] }}</b></h5>
                      <div class="table-responsive">
                          <table id="table" class="table table-sm table-bordered">
                              <thead>
                                  <tr>
                                      <th class="text-center align-middle">No.</th>
                                      <th class="text-center align-middle">NIP</th>
                                      <th class="text-center align-middle">Pegawai</th>
                                      <th class="text-center align-middle">Jumlah Potongan</th>
                                  </tr>
                              </thead>
                              <tbody>
                                @php
                                    $total = 0
                                @endphp
                                @foreach ($data as $d)
                                  @php
                                      $total += $d['total'];
                                  @endphp
                                  <tr>
                                      <td class="text-center">{{ $loop->iteration }}</td>
                                      <td class="text-center">{{ $d['nip'] }}</td>
                                      <td>
                                        @if ($d['is_exist'])  
                                          {{ $d['pegawai'] }}
                                        @else
                                          <p class="my-0 text-danger">{{ $d['pegawai'] }}</p>
                                        @endif
                                        </td>
                                      <td class="text-right">{{ number_format($d['total'],0,',','.') }}</td>
                                  </tr>
                                @endforeach
                              </tbody>
                              <tfoot>
                                <tr>
                                  <th class="text-center" colspan="3">TOTAL</th>
                                  <th class="text-right">{{ number_format($total,0,',','.')}}</th>
                                </tr>
                              </tfoot>
                          </table>
                      </div>
                    </div>
                    <div class="card-footer d-flex justify-content-between">
                        <p class="my-2">Total data: {{ count($data) }}</p>
                        <p class="my-2 text-success">Data Valid: {{ $count['valid'] }}</p>
                        <p class="my-2 text-danger">Data Tidak Valid: {{ $count['invalid'] }}</p>
                        <form id="store-form" action="{{ route('potongan.internal.store') }}" method="POST">
                          @csrf
                          <button id="btn-store" type="submit" class="btn btn-success btn-save" {{ $count['invalid'] > 0 ? 'disabled' : '' }}>
                            <span class="cil-check-alt"></span> Simpan
                          </button>
                        </form>
                    </div>
                </div>
              </div>
            </div>
          </div>
          @endif
        </div>

@endsection

@section('javascript')
<script>
    $(document).ready(function() {
      $("#tahun").select2({placeholder: "Pilih tahun", allowClear: true});
      $("#bulan").select2({placeholder: "Pilih bulan", allowClear: true});
      $("#jenis").select2({placeholder: "Pilih jenis", allowClear: true});
      $("#potongan_type_id").select2({placeholder: "Pilih jenis potongan", allowClear: true});
      $("#table").dataTable({
        "ordering": false,
        "paging": false
      });
      $("#btn-upload").click(function(){
        $(this).text("Loading...").prop('disabled', true);
        $("#import-form").submit();
      })
      $("#btn-store").click(function(){
        $(this).text("Loading...").prop('disabled', true);
        $("#store-form").submit();
      })
    });
</script>
@endsection