@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])

    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="row mx-1">
                    <div class="card">
                        <div class="row">
                            <div class="card-header col-md-auto">
                                <h5 class="mb-0">Permintaan Tenaga Kerja</h5>
                            </div>
                            <div class="col">
                                {{-- alert --}}
                                @include('components.alert')
                            </div>
                        </div>
                        <hr class="horizontal dark mt-0">

                        @if ($isKaryawan)
                            {{-- Action Buttons --}}
                            <div class="row px-4 py-2">
                                <div class="col-lg">
                                    <div class="nav-wrapper">
                                        <button type="button" class="btn btn-primary mb-0"
                                            onclick="window.location='{{ URL::to('trptkm/add') }}'">
                                            <i class="fas fa-plus me-1"></i>
                                            <span class="font-weight-bold">Tambah</span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        @endif

                        {{-- Data Table --}}
                        <div class="row px-4 py-2">
                            <div class="table-responsive">
                                <table class="table display" id="list_table">
                                    <thead class="thead-light" style="background-color: #daecff;">
                                        {{-- #00b7bd4f -> daecff --}}
                                        {{-- Header --}}
                                        <tr>
                                            <th class="text-center">Action</th>
                                            <th>No</th>
                                            <th class="text-center">Nomor Permintaan</th>
                                            <th class="text-center">Departemen</th>
                                            <th class="text-center">Bagian</th>
                                            <th class="text-center">Posisi</th>
                                            <th class="text-center">Alasan</th>
                                            <th class="text-center">Tanggal</th>
                                            <th class="text-center">Jumlah Tenaga Kerja</th>
                                            @if (!$isHead)
                                                <th class="text-center">Status</th>
                                            @endif
                                        </tr>
                                    </thead>

                                    {{-- Body --}}
                                    <tbody>
                                        @foreach ($permintaans as $permintaan)
                                            @php
                                                if ($isKaryawan) {
                                                    $status = $permintaan->status_permintaan;

                                                    $map = [
                                                        'posting' => ['text' => 'Menunggu Head', 'class' => 'warning'],
                                                        'rej_head' => ['text' => 'Ditolak Head', 'class' => 'danger'],
                                                        'acc_head' => ['text' => 'Menunggu HRD', 'class' => 'warning'],
                                                        'rej_hrd' => ['text' => 'Ditolak HRD', 'class' => 'danger'],
                                                    ];

                                                    $badgeText = $map[$status]['text'] ?? 'DRAFT';
                                                    $badgeClass = $map[$status]['class'] ?? 'secondary';
                                                }

                                                if ($isOs) {
                                                    $status = $permintaan->status_pemenuhan_os;

                                                    $map = [
                                                        'Terlambat' => ['class' => 'danger'],
                                                        'Menunggu Persetujuan HRD' => ['class' => 'secondary'],
                                                    ];

                                                    $badgeText = $status;
                                                    $badgeClass = $map[$status]['class'] ?? 'warning';
                                                }
                                            @endphp
                                            <tr>
                                                {{-- Action Buttons --}}
                                                @if ($isHead)
                                                    <td class="text-sm font-weight-normal text-nowrap">
                                                        <button type="button"
                                                            class="btn btn-primary mx-1 mb-0 w-70 rounded-3"
                                                            title="View Data"
                                                            onclick="window.location='{{ url('trptkm/show/' . encrypt($permintaan->id)) }}'">
                                                            <i class="fas fa-eye me-1"></i>
                                                            <span class="font-weight-bold">View</span>
                                                        </button>
                                                    </td>
                                                @else
                                                    <td class="text-sm font-weight-normal">
                                                        @include('pages.trptkm.partials.action-buttons')
                                                    </td>
                                                @endif
                                                <td class="text-sm align-middle font-weight-normal">{{ $loop->iteration }}
                                                </td>
                                                <td class="text-sm align-middle font-weight-normal">
                                                    {{ $permintaan->no_permintaan }}
                                                </td>
                                                <td class="text-sm align-middle font-weight-normal">
                                                    {{ $permintaan->departemen->nama }}</td>
                                                <td class="text-sm align-middle font-weight-normal">
                                                    {{ $permintaan->bagian->nama }}</td>
                                                <td class="text-sm align-middle font-weight-normal">
                                                    {{ $permintaan->jabatan->nama }}</td>
                                                <td class="text-sm align-middle font-weight-normal">
                                                    {{ $permintaan->nama_alasan }}</td>
                                                <td class="text-sm align-middle font-weight-normal">
                                                    {{ $permintaan->tanggal_range }}
                                                </td>
                                                <td class="text-sm align-middle font-weight-normal text-center">
                                                    {{ $permintaan->detail_permintaan_sum_jumlah }}
                                                </td>
                                                @if (!$isHead)
                                                    <td class="text-sm align-middle font-weight-normal">
                                                        <span class="badge bg-{{ $badgeClass }} px-3 py-2">
                                                            {{ $badgeText }}
                                                        </span>
                                                    </td>
                                                @endif
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script>
        $(document).ready(function() {
            $('#list_table').DataTable({
                paging: true,
                info: true,
                searching: true,
                responsive: true,
                order: [],
                columnDefs: [{
                        targets: [0],
                        searchable: false
                    }, // Kolom Action tidak bisa di-search
                ],
                language: {
                    search: "Cari :",
                    lengthMenu: "Tampilkan _MENU_ baris",
                    zeroRecords: "Maaf - Data tidak ada",
                    info: "Data _START_ - _END_ dari _TOTAL_",
                    infoEmpty: "Tidak ada data",
                    infoFiltered: "(pencarian dari _MAX_ data)"
                },
                dom: '<"row d-flex justify-content-between align-items-center"<"col-lg-12 d-flex justify-content-between align-items-center"Bf>>rtip',
                buttons: [{
                        extend: 'excelHtml5',
                        text: '<i class="fas fa-file-excel me-1 text-lg text-success"></i><span class="font-weight-bold"> Excel</span>'
                    },
                    {
                        extend: 'pdfHtml5',
                        text: '<i class="fas fa-file-pdf me-1 text-lg text-danger"></i><span class="font-weight-bold"> PDF</span>'
                    },
                    {
                        extend: 'print',
                        text: '<i class="fas fa-print me-1 text-lg text-info"></i><span class="font-weight-bold"> Print</span>'
                    }
                ],
                initComplete: function() {
                    var table = this.api();
                    var dataTablesFilter = $('#list_table_wrapper .dataTables_filter');

                    dataTablesFilter.addClass('d-flex align-items-center gap-4 mb-0');
                    dataTablesFilter.find('label').addClass('mb-0');

                    function applyFilterStyle(selector) {
                        $(selector).css({
                            height: '40px',
                            border: '1px solid #aaaaaa',
                            borderRadius: '0.5rem',
                            fontSize: '0.9rem'
                        });
                    }

                    function registerSelectFilter(config) {
                        var wrapper = $('<div>', {
                            class: 'mb-0'
                        });

                        var select = $('<select>', {
                            id: config.id,
                            class: 'form-select form-select-sm'
                        }).css('width', '250px');

                        select.append($('<option>', {
                            value: '',
                            text: config.placeholder
                        }));

                        config.options.forEach(function(option) {
                            select.append($('<option>', {
                                value: option.value,
                                text: option.text
                            }));
                        });

                        wrapper.append(select);
                        dataTablesFilter.prepend(wrapper);

                        applyFilterStyle('#' + config.id);

                        $('#' + config.id).on('change', function() {
                            var value = this.value;

                            if (!value) {
                                table.column(config.columnIndex).search('').draw();
                                return;
                            }

                            var escaped = $.fn.dataTable.util.escapeRegex(value);
                            table.column(config.columnIndex).search('^\\s*' + escaped + '\\s*$',
                                    true, false, true)
                                .draw();
                        });
                    }

                    @if ($isKaryawan)
                        registerSelectFilter({
                            id: 'filter-status',
                            placeholder: 'Semua Status',
                            columnIndex: 9,
                            options: [{
                                    value: 'DRAFT',
                                    text: 'Draft'
                                },
                                {
                                    value: 'Menunggu Head',
                                    text: 'Menunggu Head'
                                },
                                {
                                    value: 'Ditolak Head',
                                    text: 'Ditolak Head'
                                },
                                {
                                    value: 'Menunggu HRD',
                                    text: 'Menunggu HRD'
                                },
                                {
                                    value: 'Ditolak HRD',
                                    text: 'Ditolak HRD'
                                }
                            ]
                        });
                    @endif

                    @if ($isHead)
                        var bagians = @json($bagianDepartemen);

                        registerSelectFilter({
                            id: 'filter-bagian',
                            placeholder: 'Semua Bagian',
                            columnIndex: 4,
                            options: bagians.map(function(bagian) {
                                return {
                                    value: bagian.nama_bagian,
                                    text: bagian.nama_bagian
                                };
                            })
                        });
                    @endif

                    @if ($isOs)

                        registerSelectFilter({
                            id: 'filter-status-os',
                            placeholder: 'Semua Status',
                            columnIndex: 9,
                            options: [{
                                    value: 'Belum direalisasi',
                                    text: 'Belum direalisasi'
                                },
                                {
                                    value: 'Terealisasi Sebagian',
                                    text: 'Terealisasi Sebagian'
                                },
                                {
                                    value: 'Menunggu Persetujuan HRD',
                                    text: 'Menunggu Persetujuan HRD'
                                },
                                {
                                    value: 'Keterlambatan Diterima HRD',
                                    text: 'Keterlambatan Diterima HRD'
                                },
                                {
                                    value: 'Terlambat',
                                    text: 'Terlambat'
                                }
                            ]
                        });

                        var departemens = @json($departemens);

                        registerSelectFilter({
                            id: 'filter-departemen',
                            placeholder: 'Semua Departemen',
                            columnIndex: 3,
                            options: departemens.map(function(departemen) {
                                return {
                                    value: departemen.nama,
                                    text: departemen.nama
                                };
                            })
                        });
                    @endif
                }
            });

            // Set color button datatables
            $('.dt-button').addClass('btn btn-secondary');
            $('.dt-button').removeClass('dt-button');
        });

        // SweetAlert Posting Confirmation
        function confirmPosting(id) {
            Swal.fire({
                title: 'Konfirmasi Posting',
                text: "Apakah Anda yakin ingin memposting permintaan ini? Jika posting, permintaan akan dikirim ke Head of Department dan tidak dapat diedit",
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Ya, Posting!',
                cancelButtonText: 'Batal',
                reverseButtons: true
            }).then((result) => {
                if (result.isConfirmed) {
                    // Create form and submit
                    const form = document.createElement('form');
                    form.method = 'POST';
                    form.action = "{{ url('trptkm/posting') }}/" + id;

                    const csrfToken = document.createElement('input');
                    csrfToken.type = 'hidden';
                    csrfToken.name = '_token';
                    csrfToken.value = '{{ csrf_token() }}';

                    const methodField = document.createElement('input');
                    methodField.type = 'hidden';
                    methodField.name = '_method';
                    methodField.value = 'PUT';

                    form.appendChild(csrfToken);
                    form.appendChild(methodField);
                    document.body.appendChild(form);
                    form.submit();
                }
            });
        }

        // SweetAlert Keterlambatan Realisasi with Reason
        function confirmKeterlambatan(id) {
            Swal.fire({
                title: 'Alasan Keterlambatan Realisasi',
                html: `
          <p class="mb-3">Silakan isi alasan keterlambatan realisasi. Pengajuan akan dikirim ke HRD untuk ditinjau.</p>
          <p class="mb-1 small text-start">Isi alasan keterlambatan (min. 50, maks. 100 karakter): <span class="text-danger">*</span></p>
          <textarea id="late-reason" class="form-control" rows="4" placeholder="Masukkan alasan keterlambatan..." minlength="50" maxlength="100"></textarea>
          <p class="mt-1 small text-muted text-end"><span id="late-char-count">0</span> / 100 karakter</p>
        `,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#dc3545',
                cancelButtonColor: '#6c757d',
                confirmButtonText: 'Ya, Ajukan!',
                cancelButtonText: 'Batal',
                reverseButtons: true,
                didOpen: () => {
                    const textarea = document.getElementById('late-reason');
                    const charCount = document.getElementById('late-char-count');

                    textarea.addEventListener('input', function() {
                        charCount.textContent = this.value.length;
                    });
                },
                preConfirm: () => {
                    const reason = document.getElementById('late-reason').value.trim();
                    if (!reason) {
                        Swal.showValidationMessage('Alasan keterlambatan harus diisi!');
                        return false;
                    }
                    if (reason.length < 50) {
                        Swal.showValidationMessage('Alasan keterlambatan minimal 50 karakter!');
                        return false;
                    }
                    if (reason.length > 100) {
                        Swal.showValidationMessage('Alasan keterlambatan maksimal 100 karakter!');
                        return false;
                    }
                    return reason;
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    const form = document.createElement('form');
                    form.method = 'POST';
                    form.action = "{{ url('trptkm/keterlambatan-realisasi') }}/" + id;

                    const csrfToken = document.createElement('input');
                    csrfToken.type = 'hidden';
                    csrfToken.name = '_token';
                    csrfToken.value = '{{ csrf_token() }}';

                    const methodField = document.createElement('input');
                    methodField.type = 'hidden';
                    methodField.name = '_method';
                    methodField.value = 'PUT';

                    const reasonField = document.createElement('input');
                    reasonField.type = 'hidden';
                    reasonField.name = 'alasan_keterlambatan';
                    reasonField.value = result.value;

                    form.appendChild(csrfToken);
                    form.appendChild(methodField);
                    form.appendChild(reasonField);
                    document.body.appendChild(form);
                    form.submit();
                }
            });
        }

        function confirmSubmitRealisasi(id) {
            Swal.fire({
                title: 'Finalisasi Realisasi',
                text: 'Apakah Anda yakin ingin untuk finalisasi realisasi ini? Setelah finalisasi, status permintaan akan menjadi Terealisasi.',
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#0d6efd',
                cancelButtonColor: '#6c757d',
                confirmButtonText: 'Ya, Finalisasi!',
                cancelButtonText: 'Batal',
                reverseButtons: true
            }).then((result) => {
                if (result.isConfirmed) {
                    const form = document.createElement('form');
                    form.method = 'POST';
                    form.action = "{{ url('trptkm/submit-realisasi') }}/" + id;

                    const csrfToken = document.createElement('input');
                    csrfToken.type = 'hidden';
                    csrfToken.name = '_token';
                    csrfToken.value = '{{ csrf_token() }}';

                    const methodField = document.createElement('input');
                    methodField.type = 'hidden';
                    methodField.name = '_method';
                    methodField.value = 'PUT';

                    form.appendChild(csrfToken);
                    form.appendChild(methodField);
                    document.body.appendChild(form);
                    form.submit();
                }
            });
        }
    </script>
@endpush