@extends('layouts.email')

@push('css')
    <style>
        input[readonly],
        textarea[readonly] {
            background-color: #e9ecef;
            color: #6c757d;
            pointer-events: none;
        }

        body {
            background-color: #f8f9fa;
        }

        .card-header {
            background-color: #028284;
            color: white;
        }

        .btn-approval {
            background-color: #028284;
            border-color: #028284;
        }

        .btn-approval:hover {
            background-color: #026b6b;
            border-color: #026b6b;
        }

        h3,
        h5 {
            color: white;
        }
    </style>
@endpush

<div class="container mt-4">
    <div class="text-center mb-4">
        <img src="{{ asset('img/logomsjnew.jpg') }}" alt="Logo MSJ" width="150">
    </div>

    <div class="card shadow mb-4">
        <div class="card-header text-center">
            <h3 class="mb-0">Detail Pengajuan Cuti</h3>
        </div>
        <div class="card-body">

            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Detail Pengaju</h5>
                </div>
                {{-- Menampilkan NIK dan Nama pengaju --}}
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="nik" class="form-label">NIK</label>
                            <input type="text" id="nik" class="form-control" value="{{ $pengaju->nik ?? '' }}"
                                readonly>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="nama" class="form-label">Nama</label>
                            <input type="text" id="nama" class="form-control" value="{{ $pengaju->nama ?? '' }}"
                                readonly>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="departemen" class="form-label">Departemen</label>
                            <input type="text" id="departemen" class="form-control"
                                value="{{ $pengaju->departemen ?? '' }}" readonly>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card mt-3">
                <div class="card-header">
                    <h5 class="mb-0">Detail Pengajuan Cuti</h5>
                </div>
                <div class="card-body">
                    {{-- Dropdown untuk memilih histori cuti (jika ada) --}}
                    @if ($historiPermohonanCuti->isNotEmpty())
                        <div class="row mb-4">
                            <div class="col-md-12">
                                <label for="histori_dropdown" class="form-label">Pilih Histori Permohonan Cuti</label>
                                <select id="histori_dropdown" class="form-select" onchange="updateFields(this)">
                                    <option value="">{{ $permohonanCuti->updated_at ?? '' }} - Diedit oleh
                                        {{ $permohonanCuti->user_update ?? '' }}</option>
                                    @foreach ($historiPermohonanCuti as $index => $histori)
                                        <option value="{{ $index }}">
                                            {{ $histori->created_at }} -
                                            {{ $histori->user_update ? 'Diedit oleh ' . $histori->user_update : 'Dibuat oleh ' . $histori->user_create }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    @endif

                    {{-- Display Leave Application Details --}}
                    <div class="row">
                        {{-- ID Cuti --}}
                        <div class="col-md-6 mb-3">
                            <label for="idcuti" class="form-label">ID Cuti</label>
                            <input type="text" id="idcuti" class="form-control"
                                value="{{ $permohonanCuti->idcuti ?? '' }}" readonly>
                        </div>
                        {{-- Jenis Cuti --}}
                        <div class="col-md-6 mb-3">
                            <label for="jenis_cuti_id" class="form-label">Jenis Cuti</label>
                            <input type="text" id="jenis_cuti_id" class="form-control"
                                value="{{ $permohonanCuti->jenis_cuti_id ?? '' }}" readonly>
                        </div>
                    </div>

                    <div class="row">
                        {{-- Karyawan Pengganti --}}
                        <div class="col-md-6 mb-3">
                            <label for="nik_karyawan_pengganti" class="form-label">Karyawan Pengganti</label>
                            <input type="text" id="nik_karyawan_pengganti" class="form-control"
                                value="{{ $permohonanCuti->nik_karyawan_pengganti ?? '' }}" readonly>
                        </div>
                        {{-- Alasan Cuti --}}
                        <div class="col-md-6 mb-3">
                            <label for="alasan" class="form-label">Alasan Cuti</label>
                            <textarea id="alasan" class="form-control" readonly>{{ $permohonanCuti->alasan ?? '' }}</textarea>
                        </div>
                    </div>

                    <div class="row">
                        {{-- Tanggal Mulai --}}
                        <div class="col-md-6 mb-3">
                            <label for="tanggal_mulai" class="form-label">Tanggal Mulai</label>
                            <input id="tanggal_mulai" type="text" class="form-control text-end"
                                value="{{ old('tanggal_mulai', $permohonanCuti->tanggal_mulai ? \Carbon\Carbon::createFromFormat('Y-m-d', $permohonanCuti->tanggal_mulai)->format('d/m/Y') : '') }}"
                                readonly>
                        </div>

                        {{-- Tanggal Berakhir --}}
                        <div class="col-md-6 mb-3">
                            <label for="tanggal_berakhir" class="form-label">Tanggal Berakhir</label>
                            <input id="tanggal_berakhir" type="text" class="form-control text-end"
                                value="{{ old('tanggal_mulai', $permohonanCuti->tanggal_berakhir ? \Carbon\Carbon::createFromFormat('Y-m-d', $permohonanCuti->tanggal_berakhir)->format('d/m/Y') : '') }}"
                                readonly>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3" id="tanggal_array">
                            <label for="tanggal" class="form-label">Tanggal yang Diambil</label>
                            <table class="table table-bordered table-striped" id="tanggal_table">
                                <thead class="thead-light" style="background-color: #00b7bd4f;">
                                    <tr>
                                        <th class="text-center" style="width: 50px;">No</th>
                                        <th class="text-center">Tanggal</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @if (isset($permohonanCuti->tanggal_array))
                                        @foreach ($permohonanCuti->tanggal_array as $index => $tanggal)
                                            @php
                                                $tanggalOrig = $tanggal->tanggal_cuti ?? null;
                                                $tanggal_cuti = isset($tanggal->tanggal_cuti)
                                                    ? \Carbon\Carbon::createFromFormat(
                                                        'Y-m-d',
                                                        $tanggal->tanggal_cuti,
                                                    )->format('d-m-Y')
                                                    : null;
                                            @endphp
                                            <tr>
                                                <td class="text-center">{{ $loop->iteration }}</td>
                                                <td class="tanggal_cuti_{{ $index }} text-center" data-order="{{ $tanggalOrig ?? '' }}">
                                                    {{ $tanggal_cuti ?? '' }}
                                                </td>
                                            </tr>
                                        @endforeach
                                    @endif
                                </tbody>
                            </table>
                        </div>
                        {{-- Total Hari --}}
                        <div class="col-md-6 mb-3">
                            <label for="total_hari" class="form-label">Total Hari</label>
                            <input type="text" class="form-control text-end"
                                value="{{ $permohonanCuti->total_hari ?? '' }}" readonly>
                        </div>
                        {{-- Jumlah Cuti Minus yang Dipakai --}}
                        {{-- Hanya tampilkan jika jumlahnya tidak 0 --}}
                    </div>

                    <div class="row">
                        @if ($permohonanCuti->jumlah_cuti_minus_yang_dipakai != 0)
                            <div class="col-md-12 mb-3">
                                <label for="jumlah_cuti_minus_yang_dipakai" class="form-label">Jumlah Cuti Minus yang
                                    Dipakai</label>
                                <input type="text" id="jumlah_cuti_minus_yang_dipakai"
                                    class="form-control text-end"
                                    value="{{ $permohonanCuti->jumlah_cuti_minus_yang_dipakai ?? '' }}" readonly>
                            </div>
                        @endif
                        {{-- Pekerjaan yang Belum Diselesaikan --}}
                        <div class="col-md-6 mb-3">
                            <label for="pekerjaan_yang_belum_diselesaikan" class="form-label">Pekerjaan yang Belum
                                Diselesaikan</label>
                            <textarea id="pekerjaan_yang_belum_diselesaikan" class="form-control" readonly>{{ $permohonanCuti->pekerjaan_yang_belum_diselesaikan ?? '' }}</textarea>
                        </div>
                    </div>

                    <div class="row">
                        {{-- Alamat --}}
                        <div class="col-md-6 mb-3">
                            <label for="alamat" class="form-label">Alamat</label>
                            <input type="text" id="alamat" class="form-control"
                                value="{{ $permohonanCuti->alamat ?? '' }}" readonly>
                        </div>
                        {{-- Nomor Telepon --}}
                        <div class="col-md-6 mb-3">
                            <label for="nomor_telepon" class="form-label">Nomor Telepon</label>
                            <input type="text" id="nomor_telepon" class="form-control"
                                value="{{ $permohonanCuti->nomor_telepon ?? '' }}" readonly>
                        </div>
                    </div>

                    {{-- Lampiran --}}
                    <div class="row">
                        <div class="col-md-12 mb-3">
                            <label for="lampiran" class="form-label">Lampiran</label>
                            <div id="lampiran-preview" class="d-flex flex-wrap gap-2">
                                @if (isset($permohonanCuti->lampiran))
                                    @foreach ($permohonanCuti->lampiran as $lampiran)
                                        <div class="preview-item">
                                            <img src="{{ asset('storage/' . $lampiran->gambar_lampiran) }}"
                                                alt="Lampiran" class="img-thumbnail"
                                                style="width: 100px; height: auto;"
                                                onclick="openAttachmentModal('{{ asset('storage/' . $lampiran->gambar_lampiran) }}')">
                                        </div>
                                    @endforeach
                                @endif

                                {{-- Display a message if no attachments are available --}}
                                @if (isset($permohonanCuti->lampiran) && $permohonanCuti->lampiran->isEmpty())
                                    <div>Tidak ada lampiran yang tersedia.</div>
                                @endif
                            </div>
                        </div>
                    </div>

                    <!-- Modal untuk Menampilkan Lampiran -->
                    <div class="modal fade" id="attachmentModal" tabindex="-1"
                        aria-labelledby="attachmentModalLabel" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered modal-lg">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="attachmentModalLabel">Lampiran</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                        aria-label="Close"></button>
                                </div>
                                <div class="modal-body d-flex justify-content-center">
                                    <img id="modalImage" src="" alt="Lampiran Gambar" class="img-fluid">
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Card untuk Persetujuan oleh Atasan --}}
                    @if (isset($persetujuanAtasan) && !collect($persetujuanAtasan)->isEmpty())
                        <div class="card mb-4">
                            <div class="card-header">
                                Persetujuan oleh Atasan
                            </div>
                            <div class="card-body">
                                @foreach ($persetujuanAtasan as $approval)
                                    <div class="mb-3">
                                        <h6 class="card-subtitle mb-2 text-muted">On Step: {{ $approval->on_step }}
                                        </h6>
                                        <p><strong>Atasan Pemberi Keputusan:</strong>
                                            {{ $approval->atasan_pemberi_keputusan }}
                                        </p>
                                        @if ($approval->status == 'menyetujui')
                                            <p><strong>Status:</strong> <span
                                                    style="color: green; font-weight: bold;">{{ ucfirst($approval->status) }}</span>
                                            </p>
                                        @elseif ($approval->status == 'menolak')
                                            <p><strong>Status:</strong> <span
                                                    style="color: red; font-weight: bold;">{{ ucfirst($approval->status) }}</span>
                                            </p>
                                        @else
                                            <p><strong>Status:</strong> <span
                                                    style="color: gray; font-weight: bold;">{{ ucfirst($approval->status) }}</span>
                                            </p>
                                        @endif
                                        <p><strong>Catatan:</strong> {{ $approval->catatan }}</p>
                                        <hr>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endif

                    {{-- Card untuk Persetujuan oleh Personalia --}}
                    @if (isset($persetujuanPersonalia))
                        <div class="card mb-4">
                            <div class="card-header">
                                Persetujuan oleh Personalia
                            </div>
                            <div class="card-body">
                                @if ($persetujuanPersonalia->status == 'disetujui')
                                    <p><strong>Status:</strong> <span
                                            style="color: green; font-weight: bold;">Menyetujui</span>
                                    </p>
                                @elseif ($persetujuanPersonalia->status == 'ditolak')
                                    <p><strong>Status:</strong> <span
                                            style="color: red; font-weight: bold;">Menolak</span></p>
                                @else
                                    <p><strong>Status:</strong> <span style="color: gray; font-weight: bold;">Belum
                                            Memutuskan</span></p>
                                @endif
                                <p><strong>Catatan:</strong> {{ $persetujuanPersonalia->catatan_dari_personalia }}</p>
                            </div>
                        </div>
                    @endif

                    @if ($approvalStatus == 'menyetujui' || $approvalStatus == 'menolak')
                        <div class="d-flex justify-content-end gap-2">
                            <button class="btn btn-secondary text-white" disabled>Anda telah memberikan
                                keputusan</button>
                        </div>
                    @else
                        <h5><span class="text-danger">*</span> Persetujuan</h5>
                        <textarea id="catatan" class="form-control mb-3" placeholder="Tambahkan catatan..."></textarea>
                        <small class="text-muted d-block">Catatan wajib diisi jika menolak.</small>
                        <div class="d-flex justify-content-end gap-2">
                            <button class="btn btn-approval text-white"
                                onclick="tampilkanKonfirmasi(true)">Setuju</button>
                            <button class="btn btn-danger" onclick="tampilkanKonfirmasi(false)">Tolak</button>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    @push('js')
        <script>
            function tampilkanKonfirmasi(setuju) {
                let text = setuju ? 'Anda yakin ingin menyetujui pengajuan cuti ini?' :
                    'Anda yakin ingin menolak pengajuan cuti ini?';
                Swal.fire({
                    title: 'Konfirmasi',
                    text: text,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#028284',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Ya, Lanjutkan!',
                    cancelButtonText: 'Batal'
                }).then((result) => {
                    if (result.isConfirmed) {
                        kirimApproval(setuju);
                    }
                });
            }

            function kirimApproval(setuju) {
                let token = @json($token);
                let url = "{{ url('/approval/cuti/email/') }}";
                let catatan = document.getElementById('catatan').value;

                Swal.fire({
                    title: 'Memproses...',
                    html: 'Mohon tunggu sebentar...',
                    allowOutsideClick: false,
                    showConfirmButton: false,
                    didOpen: () => {
                        Swal.showLoading();
                    }
                });

                $.ajax({
                    url: url,
                    type: 'POST',
                    data: {
                        token: token,
                        catatan: catatan,
                        setuju: setuju
                    },
                    success: function(response) {
                        Swal.close(); // Tutup loading
                        Swal.fire({
                            title: response.status === 'success' ? 'Berhasil!' : 'Gagal!',
                            text: response.message,
                            icon: response.status === 'success' ? 'success' : 'error',
                            confirmButtonColor: '#028284'
                        }).then((result) => {
                            if (result.isConfirmed || result.dismiss === Swal.DismissReason.backdrop) {
                                window.location.reload();
                            }
                        });
                    },
                    error: function(xhr) {
                        Swal.close(); // Tutup loading
                        Swal.fire({
                            title: 'Gagal!',
                            text: xhr.responseJSON.message,
                            icon: 'error',
                            confirmButtonColor: '#028284'
                        });
                    }
                });
            }
        </script>

        <script>
            const historiData = @json($historiPermohonanCuti ?? []);

            function updateFields(select) {
                const selectedIndex = select.value;
                if (selectedIndex === "") {
                    window.location.reload(); // Reload halaman
                    return;
                }

                const selectedHistori = historiData[selectedIndex];

                document.getElementById('jenis_cuti_id').value = selectedHistori.jenis_cuti ?? '';
                document.getElementById('nik_karyawan_pengganti').value = selectedHistori.nik_karyawan_pengganti ?? '';
                document.getElementById('alasan').value = selectedHistori.alasan ?? '';
                document.getElementById('pekerjaan_yang_belum_diselesaikan').value = selectedHistori
                    .pekerjaan_yang_belum_diselesaikan ?? '';
                document.getElementById('tanggal_mulai').value = selectedHistori.tanggal_mulai ?? '';
                document.getElementById('tanggal_berakhir').value = selectedHistori.tanggal_berakhir ?? '';
                document.getElementById('tanggal_array').style.display = 'none';
                document.getElementById('alamat').value = selectedHistori.alamat ?? '';
                document.getElementById('nomor_telepon').value = selectedHistori.nomor_telepon ?? '';

                // Update lampiran preview
                const lampiranPreviewContainer = document.getElementById('lampiran-preview');
                lampiranPreviewContainer.innerHTML = ''; // Clear current lampiran

                if (selectedHistori.histori_lampiran && selectedHistori.histori_lampiran.length > 0) {
                    selectedHistori.histori_lampiran.forEach(lampiran => {
                        const imgElement = document.createElement('img');
                        imgElement.src = `{{ asset('storage/') }}/${lampiran.gambar_lampiran}`;
                        imgElement.alt = "Lampiran";
                        imgElement.className = "img-thumbnail";
                        imgElement.style.width = "100px";
                        imgElement.style.height = "auto";
                        imgElement.onclick = function() {
                            openAttachmentModal(imgElement.src);
                        };

                        const previewItem = document.createElement('div');
                        previewItem.className = "preview-item";
                        previewItem.appendChild(imgElement);

                        lampiranPreviewContainer.appendChild(previewItem);
                    });
                } else {
                    // Show message if no attachments available
                    lampiranPreviewContainer.innerHTML = '<div>Tidak ada lampiran yang tersedia.</div>';
                }
            }
        </script>

        <!-- Inisialisasi DataTables -->
        <script>
            $(document).ready(function() {
                $('#tanggal_table').DataTable({
                    "paging": true,
                    "lengthChange": true,
                    "searching": true,
                    "ordering": true,
                    "info": true,
                    "autoWidth": false,
                    "order": [[1, 'asc']],
                    "columnDefs": [
                        { "targets": 1, "type": "date", "render": function (data, type, row, meta) {
                            if (type === 'sort') {
                                var cell = $('#tanggal_table').DataTable().cell(meta).node();
                                if (cell) {
                                    var orderAttr = cell.getAttribute('data-order');
                                    if (orderAttr) return orderAttr;
                                }
                                return data;
                            }
                            return data;
                        }}
                    ]
                });
            });
        </script>

        <script>
            document.addEventListener('DOMContentLoaded', function() {
                // get $permohonanCuti->tanggal_array
                let tanggalArray = @json($permohonanCuti->tanggal_array ?? []);
                // count the array

                // Ambil semua elemen dengan kelas 'tanggal_cuti'
                let tanggalElements = [];
                tanggalArray.forEach((tanggal, index) => {
                    tanggalElements.push(document.querySelector(`.tanggal_cuti_${index}`));
                });

                // Fungsi untuk mengubah format tanggal
                function formatTanggal(tanggal) {
                    if (!tanggal) return {
                        weekday: '',
                        day: '',
                        month: '',
                        year: ''
                    };

                    // Pecah format "30-01-2025" menjadi [30, 01, 2025]
                    let parts = tanggal.split("-");
                    let date = new Date(parts[2], parts[1] - 1, parts[0]); // (tahun, bulan-1, hari)

                    // Format tanggal ke "Jumat, 02 Februari 2024"
                    let formattedDate = new Intl.DateTimeFormat('id-ID', {
                        weekday: 'long',
                        day: '2-digit',
                        month: 'long',
                        year: 'numeric'
                    }).format(date);

                    let options = {
                        weekday: 'long',
                        day: '2-digit',
                        month: 'long',
                        year: 'numeric'
                    };
                    let formattedDateParts = new Intl.DateTimeFormat('id-ID', options).formatToParts(date);

                    let weekday = formattedDateParts.find(part => part.type === 'weekday').value;
                    let day = formattedDateParts.find(part => part.type === 'day').value;
                    let month = formattedDateParts.find(part => part.type === 'month').value;
                    let year = formattedDateParts.find(part => part.type === 'year').value;

                    return {
                        weekday,
                        day,
                        month,
                        year
                    };
                }

                // Loop melalui setiap elemen tanggal dan format tanggalnya
                tanggalElements.forEach(function(tanggalElement) {
                    if (tanggalElement) {
                        let tanggal = tanggalElement.textContent
                            .trim(); // Mengambil teks tanggal dalam format "30-01-2025"
                        let formattedDate = formatTanggal(tanggal); // Mendapatkan format tanggal baru

                        // Update elemen dengan format gabungan: "Jumat, 10 September 2026"
                        tanggalElement.textContent = formattedDate.weekday + ', ' + formattedDate.day + ' ' + formattedDate.month + ' ' + formattedDate.year;
                    }
                });
            });
        </script>
    @endpush
</div>