@extends('layouts.presensi');
@section('header')
 <!-- App Header -->
 <div class="appHeader bg-primary text-light">
    <div class="left">
        <a href="/presensi/izin" class="headerButton goBack">
            <ion-icon name="chevron-back-outline"></ion-icon>
        </a>
    </div>
    <div class="pageTitle">Buat Izin</div>
    <div class="right"></div>
</div>
<!-- * App Header -->

@section('content')

    <div class="row" style="margin-top: 40px; margin-bottom: 100px;">
        <div class="col">
                @php
                $messageerror = Session::get('error');
                @endphp
                @if (Session::get('error'))
                    <div class="row">
                        <div class="col">
                            <div class="alert alert-danger">
                                {{ $messageerror }}
                            </div>
                        </div>
                    </div>
                @endif
            <form action="/presensi/storeizin" method="post"  id="frmizin" enctype="multipart/form-data" >
                @csrf
                <div class="row">
                    <div class="col">
                        Permintaan untuk
                        <input type="hidden" name="nik" id="nik" value="{{ $nik }}">
                        <input type="text" readonly class="form-control" value="{{ $nama_lengkap }}" name="nama_lengkap" placeholder="nama lengkap" autocomplete="off">
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <div class="form-group">
                            <span>Ditujukan</span>
                            <input type="hidden" name="approvalto" id="approvalto" value="{{ $manager->nik }}">
                            <input type="text" readonly class="form-control" value="{{ $manager->nama_lengkap }} - {{ $manager->jabatan }}" name="nama_lengkap" placeholder="nama lengkap" autocomplete="off">
                        </div>

                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <div class="form-group">
                            Jenis Izin
                            <select name="status"  id="status" class="form-control">
                                <option value="">Pilih izin / sakit</option>
                                <option value="i">Izin</option>
                                <option value="s">Sakit</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <div class="form-group">
                            Perihal
                            <select name="perihal"  id="perihal" class="form-control">
                                <option value="">Pilih Perihal</option>
                                <option value="1">Meninggalkan pekerjaan pada jam kerja</option>
                                <option value="2">Tidak masuk kerja</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="row" style="margin-left: 1px; margin-right: 1px;">
                    <div class="col-6">
                        Tanggal Mulai
                        <div class="form-group">
                            <input type="date" class="form-control"  value="{{ Request('tgl_izin') }}" name="tgl_izin" id="tgl_izin" placeholder="Tanggal" autocomplete="off">
                        </div>
                    </div>
                    <div class="col-6">
                        Tanggal Akhir
                        <div class="form-group">
                            <input type="date" class="form-control"  value="{{ Request('tgl_izin2') }}" name="tgl_izin2" id="tgl_izin2" placeholder="Tanggal" autocomplete="off">
                        </div>
                    </div>
                </div>

                <div class="row" style="margin-left: 1px; margin-right: 1px;">
                    <div class="col-6" id="conditionalInput" style="display: none;">
                        <div class="form-group">
                            Jam Keluar
                            <input type="time" step="60" class="form-control" name="jamawal" id="jamawal" placeholder="Jam Keluar" autocomplete="off">
                        </div>
                    </div>
                    <div class="col-6" id="conditionalInput2" style="display: none;">
                        <div class="form-group">
                            Jam Kembali
                            <input type="time" step="60" class="form-control" name="jamakhir" id="jamakhir" placeholder="Jam Kembali" autocomplete="off">
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col">
                        <div class="form-group">
                            <textarea name="keterangan" value="{{ Request('keterangan') }}" id="keterangan" cols="20" rows="5" placeholder="Keterangan" class="form-control"></textarea>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <div class="form-group">
                            <div class="custom-file-upload" id="fileUpload1">
                                <input type="file" name="foto" id="fileuploadInput" accept=".png, .jpg, .jpeg">
                                <label for="fileuploadInput">
                                    <span>
                                        <strong>
                                            <ion-icon name="cloud-upload-outline" role="img" class="md hydrated" aria-label="cloud upload outline"></ion-icon>
                                            <i>Upload berkas bukti foto (*.jpg / *.jpeg / *.png)</i>
                                        </strong>
                                    </span>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <div class="form-group">
                            <button class="btn btn-primary w-100">Kirim</button>
                        </div>
                    </div>
                </div>
                <div class="row" style="margin-top: 40px; margin-bottom: 100px;" >
                    <div class="col">
                        <div class="form-group">

                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('myscript')

<script>
    document.addEventListener("DOMContentLoaded", function() {
      const dateInput = document.getElementById("tgl_izin");
      const dateInput2 = document.getElementById("tgl_izin2");
      const currentDate = new Date();
      const formattedDate = currentDate.toISOString().split("T")[0];
      dateInput.value = formattedDate;
      dateInput2.value = formattedDate;

      const select = document.getElementById("perihal");
      const conditionalInput = document.getElementById("conditionalInput");
      const conditionalInput2 = document.getElementById("conditionalInput2");

      select.addEventListener("change", function () {
            const selectedOption = select.value;
            if (selectedOption === "1") {
                conditionalInput.style.display = "block";
                conditionalInput2.style.display = "block";
            } else {
                conditionalInput.style.display = "none";
                conditionalInput2.style.display = "none";
            }
        });
    });

</script>
<script>
    $(document).ready(function() {

        $("#tgl_izin").change(function() {
            var tgl_izin = $(this).val();
            $.ajax({
                type:'POST',
                url:'/presensi/checkpengajuanizin' ,
                data:{
                    _token:"{{  csrf_token() }}",
                    tgl_input:tgl_izin
                },
                cache:false,
                success : function(respond) {
                   if (respond==1) {
                    Swal.fire({
                        title: 'Warning',
                        text: 'Oops tgl sudah pernah di buat',
                        icon: 'error'
                        }).then((result)=>{
                            $("#tgl_izin").val("");
                        }) ;
                   }
                }
            });
        });

        $("#frmizin").submit(function() {
            var nik = $("#nik").val();
            var tgl_izin = $("#tgl_izin").val();
            var status = $("#status").val();
            var perihal = $("#perihal").val();
            var keterangan = $("#keterangan").val();

            if (nik=="") {
                Swal.fire({
                title: 'Warning',
                text: 'Silahkan isi nik',
                icon: 'error'
                });
                return false;
            } else if (tgl_izin=="") {
                Swal.fire({
                title: 'Warning',
                text: 'Silahkan isi tanggal',
                icon: 'error'
                });
                return false;
            } else if ( status=="") {
                Swal.fire({
                title: 'Warning',
                text: 'Silahkan isi jenis izin',
                icon: 'error'
                });
                return false;
            } else if ( perihal=="") {
                Swal.fire({
                title: 'Warning',
                text: 'Silahkan isi perihal',
                icon: 'error'
                });
                return false;
            }  else if ( keterangan=="") {
                Swal.fire({
                title: 'Warning',
                text: 'Silahkan isi keterangan izin',
                icon: 'error'
                });
                return false;
            }
        });

    });
</script>
@endpush