@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@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">List {{ $title_menu }}</h5>
                            </div>
                            <div class="col">
                                {{-- alert --}}
                                @include('components.alert')
                            </div>
                        </div>
                        <hr class="horizontal dark mt-0">
                        <div class="row px-4 py-2">
                            <div class="col-lg">
                                <div class="nav-wrapper">
                                    {{-- check authorize add --}}
                                    @if ($authorize && $authorize->add == '1')
                                        <div class="d-flex justify-content-between">
                                            <button type="button" class="btn btn-primary mb-0"
                                                title="Tambah Penugasan Baru"
                                                onclick="window.location='{{ url($url_menu . '/add') }}'">
                                                <i class="fas fa-plus"></i><span class="font-weight-bold"> Tambah</span>
                                            </button>
                                            <button type="button" class="btn btn-success mb-0" title="Import Assignments"
                                                data-bs-toggle="modal" data-bs-target="#bulkImportAssignmentModal">
                                                <i class="fas fa-file-excel me-1"></i>
                                                <span class="font-weight-bold">Bulk Import Assignments</span>
                                            </button>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <div class="row px-4 py-2">
                            <div class="table-responsive">
                                <table class="display table" id="list_empas">
                                    <thead class="thead-light" style="background-color: #00b7bd4f;">
                                        <tr>
                                            <th width="120">Action</th>
                                            <th>No</th>
                                            <th>Nama</th>
                                            <th>Departemen</th>
                                            <th>Jabatan</th>
                                            <th>Posisi</th>
                                            <th>Penilai</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($assignments as $assignment)
                                            @php
                                                $primary = $assignment->id;
                                                $vcount = $loop->iteration;
                                            @endphp
                                            <tr>
                                                <td class="font-weight-normal text-sm">
                                                    <div class="btn-group">
                                                        {{-- <button class="btn btn-primary btn-sm mb-0 px-3" type="button"
                                                                title="View Assignment"
                                                                onclick="window.location='{{ url($url_menu . '/show' . '/' . encrypt($primary)) }}'">
                                                                <i class="fas fa-eye"> </i><span class="font-weight-bold">
                                                                    View
                                                            </button> --}}
                                                        <button class="btn btn-primary btn-sm mb-0 px-3" type="button"
                                                            title="View Assignment"
                                                            onclick="window.location='{{ url($url_menu . '/show' . '/' . encrypt($primary)) }}'">
                                                            <i class="fas fa-eye"></i>
                                                            <span class="font-weight-bold"> Lihat</span>
                                                        </button>
                                                        {{-- <button type="button"
                                                            class="btn btn-sm btn-primary dropdown-toggle dropdown-toggle-split mb-0 px-3"
                                                            data-bs-toggle="dropdown" aria-expanded="false">
                                                            <span class="visually-hidden">Toggle Dropdown</span>
                                                        </button>
                                                        <ul class="dropdown-menu"> --}}
                                                        {{-- check authorize edit --}}
                                                        {{-- @if ($authorize && $authorize->edit == '1') --}}
                                                        {{-- button edit --}}
                                                        {{-- <li>
                                                                    <hr class="dropdown-divider">
                                                                </li> --}}
                                                        {{-- <button type="button"
                                                                    class="btn btn-sm {{ $assignment->effective_to == null ? 'btn-warning' : 'btn-secondary' }} w-90 mx-2 mb-0"
                                                                    title="Edit Assignment"
                                                                    {{ $assignment->effective_to == null ? '' : 'disabled readonly' }}
                                                                    onclick="window.location='{{ url($url_menu . '/edit' . '/' . encrypt($primary)) }}'">
                                                                    <i class="fas fa-edit"></i><span
                                                                        class="font-weight-bold">
                                                                        Edit</span>
                                                                </button>
                                                            @endif --}}
                                                        {{-- check authorize delete --}}
                                                        {{-- @if ($authorize && $authorize->delete == '1')
                                                                <form
                                                                    action="{{ url($url_menu . '/' . encrypt($primary)) }}"
                                                                    method="POST" style="display: inline">
                                                                    @csrf
                                                                    @method('DELETE')
                                                                    <li>
                                                                        <hr class="dropdown-divider">
                                                                    </li>
                                                                    <button type="submit"
                                                                        class="btn btn-sm btn-danger w-90 mx-2 mb-0"
                                                                        title="Delete Assignment"
                                                                        onclick="return deleteData(event, '{{ $assignment->employee_name }} - {{ $assignment->position_name }}','Delete')">
                                                                        <i class="fas fa-trash"></i><span
                                                                            class="font-weight-bold">
                                                                            Delete</span>
                                                                    </button>
                                                                </form>
                                                            @endif
                                                            <li>
                                                                <hr class="dropdown-divider">
                                                            </li> --}}
                                                        </ul>
                                                    </div>
                                                </td>
                                                <td>{{ $assignments->firstItem() + $loop->index }}</td>
                                                <td class="font-weight-bold text-dark text-sm">
                                                    {{ $assignment->employee_name }} - {{ $assignment->employee_nik }}</td>
                                                <td class="font-weight-normal text-sm">
                                                    {{ $assignment->department_name ?? '-' }}</td>
                                                <td class="font-weight-normal text-sm">
                                                    {{ $assignment->job_title_name ?? '-' }}</td>
                                                <td class="font-weight-normal text-sm">
                                                    {{ $assignment->position_name ?? '-' }}</td>
                                                <td class="font-weight-normal text-sm">
                                                    {{ $assignment->supervisor_name ?? '-' }} -
                                                    {{ $assignment->supervisor_nik ?? '-' }}</td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                                <div class="d-flex justify-content-between align-items-center">
                                    <div>
                                        Data {{ $assignments->firstItem() }} - {{ $assignments->lastItem() }}
                                        dari {{ $assignments->total() }} data.
                                    </div>
                                    <div>
                                        {{ $assignments->appends(request()->query())->links('pagination::bootstrap-4') }}
                                    </div>
                                </div>
                            </div>
                        </div>
                        {{-- <div class="row px-4 py-2">
                            <div class="col-lg">
                                <div class="nav-wrapper" id="noted">
                                    <code>Catatan : <i aria-hidden="true" style="color: #ffc2cd;" class="fas fa-circle"></i>
                                        Assignment tidak aktif (Sudah berakhir)</code>
                                </div>
                            </div>
                        </div> --}}
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Bulk Import Assignment Modal --}}
    <div class="modal fade" id="bulkImportAssignmentModal" tabindex="-1" role="dialog"
        aria-labelledby="bulkImportAssignmentModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="bulkImportAssignmentModalLabel">
                        <i class="fas fa-file-excel me-2"></i>Bulk Import Assignment Karyawan
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="bulkImportAssignmentForm" enctype="multipart/form-data">
                        @csrf

                        {{-- Step 1: Download Template --}}
                        <div class="mb-4">
                            <label class="form-label font-weight-bold">
                                <span class="badge bg-primary me-2">1</span>Download Template
                            </label>
                            <div>
                                <button type="button" id="downloadAssignmentTemplateBtn" class="btn btn-info btn-sm">
                                    <i class="fas fa-download me-1"></i> Download Template Excel
                                </button>
                                <small class="d-block text-muted mt-1">
                                    Template berisi semua posisi aktif. Isi NIK karyawan, NIK penilai, bulan dan tahun
                                    efektif.
                                </small>
                            </div>
                        </div>

                        <hr>

                        {{-- Step 2: Fill Template Instructions --}}
                        <div class="mb-4">
                            <label class="form-label font-weight-bold">
                                <span class="badge bg-primary me-2">2</span>Isi Template Excel
                            </label>
                            <small class="d-block text-muted">
                                Isi data penugasan karyawan untuk setiap posisi sesuai petunjuk dalam template:
                            </small>
                            <ul class="text-sm text-muted mt-1 mb-0">
                                <li>Kolom <strong>NIK Karyawan</strong> & <strong>NIK Penilai</strong> wajib diisi</li>
                                <li>Kolom <strong>Bulan Efektif</strong> (1-12) & <strong>Tahun Efektif</strong> (contoh:
                                    2026)</li>
                                <li>Jika karyawan sudah memiliki penugasan di bulan yang sama, data akan diperbarui</li>
                            </ul>
                        </div>

                        <hr>

                        {{-- Step 3: File Upload --}}
                        <div class="mb-3">
                            <label for="assignment_excel_file" class="form-label font-weight-bold">
                                <span class="badge bg-primary me-2">3</span>Upload File Excel
                                <span class="text-danger">*</span>
                            </label>
                            <input type="file" class="form-control" id="assignment_excel_file" name="excel_file"
                                accept=".xlsx,.xls" required>
                            <small class="text-muted">
                                Format: .xlsx atau .xls, Maksimal 5MB
                            </small>
                        </div>

                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="button" id="submitBulkImportAssignment" class="btn btn-primary">
                        <i class="fas fa-upload me-1"></i> Import
                    </button>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('js')
    <script>
        $(document).ready(function() {
            // Check if DataTable is already initialized
            if ($.fn.DataTable.isDataTable('#list_empas')) {
                $('#list_empas').DataTable().destroy();
            }

            //set table into datatables
            $('#list_empas').DataTable({
                paging: false,
                info: false,
                searching: true,
                responsive: true,
                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)"
                },
                responsive: true,
                dom: '<"row d-flex justify-content-between align-items-center"<"col-lg-12 d-flex justify-content-between align-items-center"Bf>>rtip',
                buttons: [{
                        text: '<i class="fas fa-file-excel me-1 text-lg text-success"></i><span class="font-weight-bold"> Excel</span>',
                        action: function() {
                            // Arahkan ke server untuk ekspor Excel
                            window.location.href = "{{ url($url_menu) }}?export=excel";
                        }
                    },
                    {
                        extend: 'pdfHtml5',
                        text: '<i class="fas fa-file-pdf me-1 text-lg text-danger"></i><span class="font-weight-bold"> PDF</span>',
                        action: function() {
                            // Arahkan ke server untuk ekspor PDF
                            window.location.href = "{{ url($url_menu) }}?export=pdf";
                        }
                    },
                ],
                initComplete: function() {
                    // Tambahkan custom search bar
                    var searchBarHtml = `
                        <div class="dataTables_filter d-flex justify-content-end">
                            <form method="GET" action="{{ url($url_menu) }}" class="d-flex">
                                <input type="text" name="search" class="form-control me-2" placeholder="Search..." value="{{ request('search') }}">
                            </form>
                        </div>
                    `;
                    $('.dataTables_filter').remove(); // Hapus input pencarian default DataTables
                    $(searchBarHtml).insertAfter('.dt-buttons'); // Tambahkan search bar setelah tombol
                }
            });

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

            //check authorize button datatables
            @if ($authorize)
                @if (isset($authorize->excel) && $authorize->excel == '0')
                    $('.buttons-excel').remove();
                @endif
                @if (isset($authorize->pdf) && $authorize->pdf == '0')
                    $('.buttons-pdf').remove();
                @endif
                @if (isset($authorize->print) && $authorize->print == '0')
                    $('.buttons-print').remove();
                @endif
            @endif

            // ==========================================
            // BULK IMPORT ASSIGNMENT HANDLERS
            // ==========================================

            // Download template button
            $('#downloadAssignmentTemplateBtn').on('click', function() {
                window.location.href = "{{ url('empas/bulk-template') }}";
            });

            // Submit bulk import
            $('#submitBulkImportAssignment').on('click', function(e) {
                e.preventDefault();

                const form = $('#bulkImportAssignmentForm')[0];

                // Validate form
                if (!form.checkValidity()) {
                    form.reportValidity();
                    return;
                }

                // Show loading
                Swal.fire({
                    title: 'Mengimport Data...',
                    text: 'Mohon tunggu, proses mungkin memakan waktu beberapa menit',
                    allowOutsideClick: false,
                    allowEscapeKey: false,
                    didOpen: () => {
                        Swal.showLoading();
                    }
                });

                // Submit via AJAX
                const formData = new FormData(form);

                $.ajax({
                    url: "{{ url('empas/import-bulk-excel') }}",
                    method: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        let detailHtml = `<p>${response.message}</p>`;
                        detailHtml += `<ul class="text-start">`;
                        detailHtml += `<li>Assignment baru: ${response.data.created}</li>`;
                        detailHtml +=
                            `<li>Assignment diperbarui: ${response.data.updated}</li>`;
                        if (response.data.errors > 0) {
                            detailHtml +=
                                `<li class="text-warning">Gagal: ${response.data.errors}</li>`;
                        }
                        detailHtml += `</ul>`;

                        if (response.data.error_details && response.data.error_details.length >
                            0) {
                            detailHtml +=
                                `<div class="alert alert-warning text-start mt-2"><small>`;
                            response.data.error_details.forEach(function(err) {
                                detailHtml += `${err}<br>`;
                            });
                            detailHtml += `</small></div>`;
                        }

                        Swal.fire({
                            icon: 'success',
                            title: 'Import Berhasil!',
                            html: detailHtml,
                            confirmButtonColor: '#028284'
                        }).then(() => {
                            window.location.reload();
                        });
                    },
                    error: function(xhr) {
                        let errorMessage = 'Import gagal';

                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            errorMessage = xhr.responseJSON.message;
                        }

                        // Show errors if validation failed
                        if (xhr.responseJSON && xhr.responseJSON.errors) {
                            const errors = xhr.responseJSON.errors;
                            let errorList = '';

                            if (Array.isArray(errors)) {
                                errorList = '<ul class="text-start">' +
                                    errors.map(err => '<li>' + err + '</li>').join('') +
                                    '</ul>';
                            } else {
                                errorList = '<ul class="text-start">' +
                                    Object.values(errors).flat().map(err => '<li>' + err +
                                        '</li>').join('') +
                                    '</ul>';
                            }

                            errorMessage += '<br><br>' + errorList;
                        }

                        Swal.fire({
                            icon: 'error',
                            title: 'Import Gagal',
                            html: errorMessage,
                            confirmButtonColor: '#028284'
                        });
                    }
                });
            });
        });

        //function delete
        function deleteData(event, name, msg) {
            event.preventDefault(); // Prevent default form submission
            Swal.fire({
                title: 'Konfirmasi',
                text: `Apakah Anda Yakin ${msg} Data ${name} ini?`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: `Ya, ${msg}`,
                cancelButtonText: 'Batal',
                confirmButtonColor: '#028284'
            }).then((result) => {
                if (result.isConfirmed) {
                    // Find the closest form element and submit it manually
                    event.target.closest('form').submit();
                }
            });
        }
    </script>
@endpush