Anons79 Mini Shell

@extends('layouts.app')
@push('scripts')
    <script>
        let row;
        var myModal = new bootstrap.Modal(document.getElementById('modalIzin'));

        function send() {
            let form = document.querySelector('#modalIzinForm');
            let data = new FormData(form);
            let url = form.getAttribute('action') + '/permintaan-izin/' + form.dataset.id + "/status";
            let tombol = document.getElementById("tombol-modalIzin-" + form.dataset.id);
            let method = form.getAttribute('method');
            let xhr = new XMLHttpRequest();
            xhr.open(method, url);
            xhr.onload = function() {
                if (xhr.status === 200) {
                    let response = JSON.parse(xhr.responseText);
                    if (response.status === 'success') {
                        showToast('Berhasil', response.message, 'bg-success');
                        const status = document.getElementById("status").value;
                        document.getElementById("label-status-" + form.dataset.id).innerHTML = status;
                        document.getElementById("label-status-" + form.dataset.id).classList.remove("bg-warning");
                        if (status == "accept") {
                            document.getElementById("label-status-" + form.dataset.id).classList.add("bg-success");
                        } else {
                            document.getElementById("label-status-" + form.dataset.id).classList.add("bg-danger");
                        }
                        tombol.dataset.taggapan = document.getElementById("tanggapan_verifikator").value;
                    } else {
                        showToast('Gagal', response.message, 'bg-danger');
                    }
                } else {
                    showToast('Gagal', 'Terjadi kesalahan', 'bg-danger');
                }
                myModal.hide();
                row.remove();
            };
            xhr.send(data);
        }
        document.getElementById('reject-button').addEventListener('click', function(e) {
            document.getElementById("status").value = "reject";
            send();
            e.preventDefault();
        });


        document.getElementById('accept-button').addEventListener('click', function(e) {
            document.getElementById("status").value = "accept";
            send();
            e.preventDefault();
        });

        let tombolModalIzin = document.querySelectorAll('.tombol-modalIzin')

        tombolModalIzin.forEach((el) => {
            el.addEventListener('click', function() {

                row = el.parentElement.parentElement;
                let tanggal_izin = this.dataset.tanggal_izin;
                let keterangan = this.dataset.keterangan;
                document.getElementById("tanggal_izin").value = tanggal_izin;
                document.getElementById("keterangan").innerHTML = keterangan;
                document.getElementById("gambar").src = this.dataset.gambar;
                document.getElementById("karyawan").value = this.dataset.karyawan;
                document.getElementById("tanggapan_verifikator").value = this.dataset.tanggapan;

                let form = document.querySelector('#modalIzinForm');
                form.dataset.id = this.dataset.id;

            });
        });
    </script>
@endpush
@section('content')
    <h4 class="fw-bold py-3 mb-4"><span class="text-muted fw-light">Permintaan Izin</span></h4>

    <div class="card">
        <h5 class="card-header">Permintaan Izin</h5>
        <div class="card-body">
            <div class="row mb-4">
                <div class="col-md-10">
                    <form class="form row" action="">
                        <div class="col-md-2 ">
                            <div class="form-group">
                                <label for="">Pencarian</label>
                                <input type="text" class="form-control" placeholder="Search..." aria-label="Search"
                                    name="search" value="{{ request()->search }}">
                            </div>
                        </div>
                        <div class="col">
                            <div class="form-group">
                                <label for="periode_awal">Periode Awal</label>
                                <input type="date" class="form-control" placeholder="Periode Awal..."
                                    aria-label="Periode Awal" name="periode_awal" id="periode_awal"
                                    value="{{ request()->periode_awal }}">
                            </div>
                        </div>
                        <div class="col">
                            <div class="form-group">
                                <label for="periode_akhir">Periode Akhir</label>
                                <input type="date" class="form-control" placeholder="Periode Akhir..."
                                    aria-label="Periode Akhir" name="periode_akhir" id="periode_akhir"
                                    value="{{ request()->periode_akhir }}">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="">Perusahaan</label>
                                <select class="form-control" id="perusahaan_id" name="perusahaan_id">
                                    <option value="0">Semua Perusahaan</option>
                                    @foreach ($perusahaans as $item)
                                        <option value="{{ $item->id }}"
                                            @if (request()->perusahaan_id == $item->id) selected @endif>
                                            {{ $item->nama_perusahaan }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-3 ">
                            <div class="from-group">
                                <label for="">Departemen</label>
                                <select class="form-control" id="departemen_id" name="departemen_id">
                                    <option value="0">Semua Departemen</option>
                                    @foreach ($departemens as $item)
                                        <option value="{{ $item->id }}"
                                            @if (request()->departemen_id == $item->id) selected @endif>
                                            {{ $item->nama_departemen }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-2 my-4">
                            <button class="btn btn-secondary">Search</button>
                        </div>
                    </form>
                </div>

            </div>
            <div class="table-responsive text-nowrap">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>
                                NIK
                            </th>
                            <th>Karyawan</th>
                            <th>Jenis Izin</th>
                            <th>Tanggal Izin</th>
                            <th>Keterangan</th>
                            <th>Status</th>
                            <th>Foto Bukti</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($datas as $data)
                            <tr>
                                <td>{{ $datas->firstItem() + $loop->index }}</td>
                                <td>{{ $data->karyawan->nik }}</td>
                                <td>{{ $data->karyawan->nama }}</td>
                                <td>{{ $data->jenis_izin_label }}</td>
                                <td>{{ $data->tanggal_izin }}</td>
                                <td>{{ $data->keterangan }}</td>
                                <td><span id="label-status-{{ $data->id }}"
                                        class="badge @if ($data->status == 'pending') bg-warning @elseif($data->status == 'accept') bg-success @else bg-danger @endif">{{ $data->status }}</span>
                                </td>
                                <td><a target="_blank" href="{{ route('izin.lampiran', $data->id) }}"><i
                                            class="bx bx-image"></i></a></td>
                                <td>
                                    <button type="button" class="btn btn-sm btn-primary d-inline tombol-modalIzin"
                                        id="tombol-modalIzin-{{ $data->id }}" data-id="{{ $data->id }}"
                                        data-bs-toggle="modal" data-bs-target="#modalIzin"
                                        data-gambar="{{ route('permintaan-izin.lampiran', $data->id) }}"
                                        data-tanggal_izin="{{ @$data->tanggal_izin }}"
                                        data-karyawan='{{ $data->karyawan->nama }}'
                                        data-tanggapan='{{ $data->tanggapan_verifikator }}'
                                        data-keterangan="{{ @$data->keterangan }}">
                                        <i class="bx bx-detail"></i>
                                    </button>

                                </td>
                            </tr>
                        @endforeach


                    </tbody>
                    <tfoot>
                        <tr>
                            <td colspan="9">
                                {{ $datas->appends(request()->query())->links() }}
                            </td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modalIzin" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <form class="modal-content" method="POST" id="modalIzinForm" action="{{ url('/') }}">
                @csrf
                <input type="hidden" name="status" id="status">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalIzinTitle">Izin <span id="jenis_absen"></span></h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row mb-3">
                        <div class="col-md-12">
                            <img src="" alt="" id="gambar" style="max-height: 500px;width:100%;">
                        </div>


                    </div>
                    <div class="row mb-3">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="keterangan">Keterangan</label>
                                <textarea name="keterangan" id="keterangan" readonly class="form-control"></textarea>
                            </div>
                        </div>


                    </div>
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label for="karyawan" class="form-label">Karyawan</label>
                            <input type="text" class="form-control " name="karyawan" id="karyawan" readonly>
                        </div>
                        <div class="col-md-6">
                            <label for="tanggal_izin" class="form-label">Tanggal Izin</label>
                            <input type="date" class="form-control " name="tanggal_izin" id="tanggal_izin" readonly>
                        </div>


                    </div>
                    <div class="row ">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="tanggapan_verifikator">Tanggapan</label>
                                <textarea name="tanggapan_verifikator" id="tanggapan_verifikator" class="form-control" placeholder="Tanggapan..."></textarea>
                            </div>
                        </div>


                    </div>
                </div>
                <div class="modal-footer">

                    <button type="submit" class="btn btn-warning " id="reject-button" name="status" value="reject"><i
                            class="bx bx-x"></i></button>
                    <button type="submit" class="btn btn-success" id="accept-button" name="status" value="accept"><i
                            class="bx bx-check"></i></button>
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                        Close
                    </button>
                </div>
            </form>
        </div>
    </div>
@endsection