@extends('layout.main')

@section('title', 'OnS')

@section('active-navbar')
<div class="collapse navbar-collapse" id="navbarSupportedContent">
  <ul class="navbar-nav me-auto mb-2 mb-lg-0">
      <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="/public/input">Input</a>
      </li>
      <li class="nav-item">
          <a class="nav-link" href="/public/laporan">Laporan</a>
      </li>
  </ul>
</div>
@endsection

@section('content')
@if ($errors->any())
    <div class="alert alert-danger" role="alert">
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

@if ($success = Session::get('success'))
    <div class="alert alert-primary"
        role="alert">
        {{ $success }}
    </div>
@endif
@section('judul', 'Input Data Laporan')
<div class="card">
  <div class="card-header">
      <h5>Form input Laporan</h5>
  </div>
  <div class="card-body">

    <form action="inputons" method="POST" enctype="multipart/form-data" id="formsaya">
      @csrf
    <div class="form-group row">
      <label for="inputnamapetugas" class="col-sm-5 col-form-label">Nama Petugas</label>
      <div class="col-sm-10">
          <div class="col-sm-9">
            <select class="form-control form-control-sm" id="idpetugas" name="idpetugas" required>
              <option value="">-- Pilih Nama Petugas --</option>
            @foreach ($petugas as $p)
              <option value="{{$p->id}}">{{$p->namapetugas}}</option>
            @endforeach
            </select>
          </div>
      </div>
  </div >
  <div class="form-group row">
    <label for="inputnamacabang" class="col-sm-5 col-form-label">Nama Cabang</label>
    <div class="col-sm-10">
        <div class="col-sm-9">
            <select class="form-control form-control-sm" id="idcabang" onchange="displayuker(this.value)" name="idcabang" required>
              <option value="">-- Pilih Nama Cabang --</option>
            @foreach ($cabangs as $c)
              <option value="{{$c->id}}">{{$c->namacabang}}</option>
            @endforeach
            </select>
        </div>
    </div>
  </div >
  <div class="form-group row">
    <label for="inputnamauker" class="col-sm-5 col-form-label">Nama Uker</label>
    <div class="col-sm-10">
        <div class="col-sm-9">
            <select class="form-control form-control-sm" id="iduker" name="iduker" required>
              <option value="">-- Pilih Nama Cabang Terlebih Dahulu --</option>
            </select>
        </div>
    </div>
  </div >
  
  
  <div class="form-group row">
    <label for="inputnamajobdesk" class="col-sm-5 col-form-label">Kategori Temuan</label>
    <div class="col-sm-10">
        <div class="col-sm-9">
            <select class="form-control form-control-sm" onchange="displayketerangan(this.value)" id="idjobdesk" name="idjobdesk" required>
              <option value="" selected>-- Pilih Kategori Temuan --</option>
            @foreach ($jobdesks as $j)
              <option value="{{$j->id}}">{{$j->namajobdesk}}</option>
            @endforeach
            </select>
        </div>
    </div>
  </div >

  <div class="form-group row">
    <div class="col-sm-10">
      <div class="col-sm-9">
        <label for="namapekerja" class="form-label">Nama Pekerja</label>
        <input type="person" class="form-control" id="namapekerja" placeholder="Masukan Nama Pekerja apabila ada apabila tidak ada isi -" name="namapekerja" required>
      </div>    
    </div>
  </div >

  <div class="form-group row">
    <label for="inputketerangan" class="col-sm-5 col-form-label">Keterangan</label>
    <div class="col-sm-10">
        <div class="col-sm-9">
            <select class="form-select form-control-sm custom-dropdown"  style="white-space: normal;" id="idketerangan" name="keterangan" aria-expanded="false" required>
              <option aria-expanded="false" value=""  >-- Pilih Nama Jobdesk Terlebih Dahulu --</option>
            </select>
        </div>
    </div>
  </div >
  <div class="form-group row">
    <label for="inputkeputusan" class="col-sm-5 col-form-label">Sesuai</label>
    <div class="col-sm-10">
      <div class="col-sm-9">
        <div class="form-check form-check-inline">
          <input class="form-check-input mb-3" type="radio" name="keputusan" id="keputusan" value="Ya" checked>
          <label class="form-check-label" for="keputusan">Ya</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" name="keputusan" id="keputusan" value="Tidak">
          <label class="form-check-label" for="keputusan">Tidak</label>
        </div>
      </div>
    </div>
  </div>
  
    <div class="form-group row">
    <div class="col-sm-10">
      <div class="col-sm-9">
        <label for="alasan" class="form-label">Alasan</label>
        <input type="text" class="form-control" id="keterangansesuai" placeholder="Masukan Alasan" name="keterangansesuai" required>
      </div>    
    </div>
  </div >

  <div class="mb-3 col-sm-6">
    <label for="inputgambar" class="form-label form-control-sm ">Upload Gambar Bukti Keterangan</label>
    <input class="form-control form-control-sm " id="file" name="file" type="file" required>
    @if ($errors->has('file'))
        <span class="text-danger">{{ $errors->first('file') }}</span>
      @endif
  </div>

  <br>
    <div class="col-sm-10">
        <button type="button" onclick="confirmform()" class="btn btn-primary" id="btnsubmit">Input Data</button>
    </div>
  </div>

</div>
</form>

<script>
function confirmform() {
    // Ambil semua elemen required
    const requiredFields = document.querySelectorAll('#formsaya input[required], #formsaya select[required]');

    // Cek apakah ada field yang kosong
    let isFormValid = true;
    requiredFields.forEach(field => {
        if (!field.value) {
            isFormValid = false;
            // Tampilkan SweetAlert peringatan
            Swal.fire({
                icon: 'error',
                title: 'Error gaes',
                text: 'Masih ada yang kosong',
            });
        }
    });

    if (isFormValid) {
        // Jika semua field terisi, tampilkan konfirmasi
        Swal.fire({
            title: 'Konfirmasi!',
            text: 'Pastikan Data Sudah Benar!',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Ya',
            cancelButtonText: 'Batal',
        }).then((result) => {
            if (result.isConfirmed) {
                // Jika user klik "Ya", submit form
                document.getElementById('formsaya').submit();
            }
        });
    }
}

function displayketerangan(value)
{
    var jobdeskId = value;
        $.ajax({
            url: '/public/get-keterangans', // Replace with your route
            data: { jobdesk_id: jobdeskId },
            success: function(response) {
                $('#idketerangan').empty();
                $.each(response.keterangans, function(index, keterangan) {
                    $('#idketerangan').append('<option value="' + keterangan.id + '">' + keterangan.keterangan + '</option>');
                });
            }
        });
}

function displayuker(value)
{
    var idcabang = value;
        $.ajax({
            url: '/public/get-uker', // Replace with your route
            data: { idcabang: idcabang },
            success: function(response) {
                $('#iduker').empty();
                $.each(response.namauker, function(index, namauker) {
                    $('#iduker').append('<option value="' + namauker.id + '">' + namauker.namauker + '</option>');
                });
            }
        });
}
</script>

@endsection