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

@section('content')
<div class="row" style="margin-top: 50px; margin-bottom: 100px;">
    <div class="col">
        @php
            $messagesuccess = Session::get('success');
            $messageerror = Session::get('error');
        @endphp
        @if (Session::get('success'))
            <div class="alert alert-success">
                {{ $messagesuccess }}
            </div>
        @endif
        @if (Session::get('error'))
            <div class="alert alert-danger">
                {{ $messageerror }}
            </div>
        @endif

        <form action="/cuti/storecuti" method="post"  id="frmcuti" 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">
                        Dari Tanggal
                        <input type="date" class="form-control" name="tgl_cuti1" id="tgl_cuti1" placeholder="Dari Tanggal" autocomplete="off">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <div class="form-group">
                        Sampai Tanggal
                        <input type="date" class="form-control" name="tgl_cuti2" id="tgl_cuti2" placeholder="Sampai Tanggal" autocomplete="off">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <div class="form-group">
                       Jumlah hari
                        <input type="number" class="form-control" name="jmlhari" id="jmlhari" placeholder="Isi jumlah hari" autocomplete="off">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    Jenis Cuti
                    <div class="form-group">
                        <select name="status" id="status" class="form-control">
                            <option value="">Pilih  Jenis Cuti</option>
                            @foreach ($jenis_cuti as $d)
                            <option value={{ $d->kode_cuti  }} >{{ $d->jenis_cuti }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <div class="form-group">
                       Alamat saat cuti
                        <input type="memo" class="form-control" name="alamat" id="alamat" placeholder="Isi alamat" autocomplete="off">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    Alasan cuti
                    <div class="form-group">
                        <textarea name="keterangan" id="keterangan" cols="10" rows="5" placeholder="Keterangan" class="form-control"></textarea>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    Upload dokumen pendukung (Foto / Gambar)
                    <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 file gambar (*.png / *.jpg / *.jpeg) </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_cuti1");
      const dateInput2 = document.getElementById("tgl_cuti2");
      const jmlhari = document.getElementById("jmlhari");
      const currentDate = new Date();
      const formattedDate = currentDate.toISOString().split("T")[0];
      dateInput.value = formattedDate;
      dateInput2.value = formattedDate;
      jmlhari.value =1;
    });

</script>
<script>
    $(document).ready(function() {
        $("#frmcuti").submit(function() {
            var nik = $("#nik").val();
            var tgl_cuti1 = $("#tgl_cuti1").val();
            var tgl_cuti2 = $("#tgl_cuti2").val();
            var status = $("#status").val();
            var keterangan = $("#keterangan").val();
            var alamat = $("#alamat").val();
            var jmlhari = $("#jmlhari").val();

            if (nik=="") {
                Swal.fire({
                title: 'Warning',
                text: 'Silahkan isi nik',
                icon: 'error'
                });
                return false;
            } else if (tgl_cuti1=="") {
                Swal.fire({
                title: 'Warning',
                text: 'Silahkan isi tanggal cuti',
                icon: 'error'
                });
                return false;
            } else if ( tgl_cuti2=="") {
                Swal.fire({
                title: 'Warning',
                text: 'Silahkan isi sampai tanggal',
                icon: 'error'
                });
                return false;
            } else if ( status=="") {
                Swal.fire({
                title: 'Warning',
                text: 'Silahkan isi jenis cuti',
                icon: 'error'
                });
                return false;
            } else if ( alamat=="") {
                Swal.fire({
                title: 'Warning',
                text: 'Silahkan isi alamat cuti',
                icon: 'error'
                });
                return false;
            } else if ( keterangan=="") {
                Swal.fire({
                title: 'Warning',
                text: 'Silahkan isi alasan cuti',
                icon: 'error'
                });
                return false;
            } else if ( jmlhari=="") {
                Swal.fire({
                title: 'Warning',
                text: 'Silahkan isi jumlah hari',
                icon: 'error'
                });
                return false;
            }
        });
    });
</script>
@endpush