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

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

    <div class="container-fluid py-3">
        {{-- Filter Card --}}
        <div class="card shadow-sm mb-3">
            <div class="card-body p-3">
                <h6 class="mb-3 text-dark font-weight-bold">Pencarian</h6>
                <hr class="horizontal dark mt-0">

                <form method="POST" action="{{ URL::to($url_menu) }}" id="{{ $dmenu }}-form">
                    @csrf
                    <div class="row">
                        {{-- Left Column --}}
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label class="form-control-label font-weight-bold">Dari Tanggal</label>
                                <input class="form-control" type="date" name="tanggal_mulai" value="{{ old('tanggal_mulai', $filter['tanggal_mulai'] ?? '') }}">
                                @error('tanggal_mulai')
                                    <p class="text-danger text-xs pt-1">{{ $message }}</p>
                                @enderror
                            </div>

                            @unless (($is_spv ?? false))
                                <div class="form-group mb-3">
                                    <label class="form-control-label font-weight-bold">Departemen</label>
                                    <select class="form-select" name="departemen">
                                        <option value="semua" {{ old('departemen', $filter['departemen'] ?? '') == 'semua' || old('departemen', $filter['departemen'] ?? '') == '' ? 'selected' : '' }}>Tampilkan Semua</option>
                                    @foreach ($departemen_options ?? [] as $dept)
                                        <option value="{{ $dept->nama }}" {{ old('departemen', $filter['departemen'] ?? '') == $dept->nama ? 'selected' : '' }}>{{ $dept->nama }}</option>
                                    @endforeach
                                    </select>
                                </div>
                            @else
                                <div class="form-group mb-3">
                                    <label class="form-control-label font-weight-bold">Nama Karyawan</label>
                                    <input type="hidden" name="karyawan" id="nik_hidden" value="{{ old('karyawan', $filter['karyawan'] ?? '') }}">
                                    <div class="input-group">
                                        <input type="text" class="form-control" id="karyawan_pick" placeholder="Pilih karyawan" readonly value="{{ old('karyawan', $filter['karyawan'] ?? '') }}">
                                        <span class="input-group-text bg-primary text-light" style="cursor:pointer" onclick="openKaryawanModal()">
                                            <i class="fas fa-search"></i>
                                        </span>
                                    </div>
                                </div>
                            @endunless

                            
                        </div>

                        {{-- Right Column --}}
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label class="form-control-label font-weight-bold">Sampai Tanggal</label>
                                <input class="form-control" type="date" name="tanggal_akhir" value="{{ old('tanggal_akhir', $filter['tanggal_akhir'] ?? '') }}">
                                @error('tanggal_akhir')
                                    <p class="text-danger text-xs pt-1">{{ $message }}</p>
                                @enderror
                            </div>
                            @unless (($is_spv ?? false))
                                <div class="form-group mb-3">
                                    <label class="form-control-label font-weight-bold">Nama Karyawan</label>
                                    <input type="hidden" name="karyawan" id="nik_hidden" value="{{ old('karyawan', $filter['karyawan'] ?? '') }}">
                                    <div class="input-group">
                                        <input type="text" class="form-control" id="karyawan_pick" placeholder="Pilih karyawan" readonly value="{{ old('karyawan', $filter['karyawan'] ?? '') }}">
                                        <span class="input-group-text bg-primary text-light" style="cursor:pointer" onclick="openKaryawanModal()">
                                            <i class="fas fa-search"></i>
                                        </span>
                                    </div>
                                </div>
                            @endunless
                        </div>
                    </div>

                    {{-- Submit Button --}}
                    <div class="row mt-3">
                        <div class="col-md-12 text-end">
                            <button type="submit" class="btn btn-primary mb-0">
                                <i class="fas fa-search me-1"></i>
                                Cari
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        {{-- Results Card --}}
        <div class="card shadow-sm">
            <div class="card-body p-3">
                <h4 class="text-dark font-weight-bold mb-3">List Rekap Surat Pelanggaran</h4>
                <hr class="horizontal dark mt-0">

                @if (($is_spv ?? false) && !empty($spv_scope['departemen']))
                    <div class="alert alert-info text-white py-2 mb-3" role="alert">
                        <i class="fas fa-info-circle me-1"></i>
                        Data ditampilkan untuk departemen <b>{{ $spv_scope['departemen'] }}</b> - bagian <b>{{ $spv_scope['bagian'] }}</b>.
                    </div>
                @endif

                <div class="mb-3">
                    <a href="{{ url('/rptsp') }}" class="btn btn-secondary mb-0">
                        <i class="fas fa-circle-left me-1"></i>
                        Kembali
                    </a>
                </div>

                <div id="spReportExportButtons" class="d-flex gap-2 flex-wrap mb-2"></div>

                <div class="table-responsive">
                    <table class="table table-hover align-items-center mb-0" id="list_{{ $dmenu }}">
                        <thead class="thead-light" style="background-color: #00b7bd4f;">
                            <tr>
                                <th style="width: 100px;">Action</th>
                                <th>NIK</th>
                                <th>Nama Karyawan</th>
                                <th>Departemen</th>
                                @if($is_ua_visible ?? true)
                                    <th class="text-center">Total UA</th>
                                @endif
                                <th class="text-center">Total SP</th>
                                @if($is_st_visible ?? (($is_hrd ?? false) || ($is_spv ?? false)))
                                    <th class="text-center">Total ST</th>
                                @endif
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($rows ?? [] as $row)
                                <tr>
                                    <td>
                                        <a href="{{ url('/rptsp/detail/' . $row['nik']) }}?from=list&return={{ urlencode(request()->fullUrl()) }}" class="btn btn-primary btn-sm mb-0" 
                                           style="background: #028284; border-color: #028284; color: #fff; min-width: 70px;">
                                            <i class="fas fa-eye me-1"></i>View
                                        </a>
                                    </td>
                                    <td>{{ $row['nik'] }}</td>
                                    <td>{{ $row['nama_karyawan'] }}</td>
                                    <td>{{ $row['departemen'] }}</td>
                                    @if($is_ua_visible ?? true)
                                    <td class="text-center">
                                        <div class="d-inline-flex gap-1 align-items-center">
                                            <span class="badge bg-primary text-white px-3 py-2 font-weight-bold" title="Total Unsafe Action Selesai" style="font-size: 0.875rem;">
                                                {{ $row['total_ua'] ?? 0 }}
                                            </span>
                                            <span class="badge bg-danger text-white px-3 py-2 font-weight-bold" title="Total Unsafe Action Ditolak" style="font-size: 0.875rem;">
                                                {{ $row['total_ua_ditolak'] ?? 0 }}
                                            </span>
                                        </div>
                                    </td>
                                    @endif
                                    <td class="text-center">
                                        <span class="badge bg-primary text-white px-3 py-2 font-weight-bold" style="font-size: 0.875rem;">
                                            {{ $row['total_sp'] ?? 0 }}
                                        </span>
                                    </td>
                                    @if($is_st_visible ?? (($is_hrd ?? false) || ($is_spv ?? false)))
                                        <td class="text-center">
                                            <span class="badge bg-warning text-white px-3 py-2 font-weight-bold" style="font-size: 0.875rem;">
                                                {{ $row['total_st'] ?? 0 }}
                                            </span>
                                        </td>
                                    @endif
                                </tr>
                            @empty
                                {{-- DataTables will show zeroRecords message --}}
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    {{-- MODAL KARYAWAN PICKER --}}
    <div class="modal fade" id="karyawanPickerModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="d-flex justify-content-between align-items-center w-100">
                        <h5 class="modal-title mb-0">List Data Karyawan</h5>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="d-flex justify-content-end mb-3">
                        <div class="input-group picker-search-wrap">
                            <input type="text" class="form-control" id="karyawanPickerSearch" placeholder="Cari..." oninput="filterKaryawanPicker()">
                            <button class="btn btn-primary picker-search-btn" type="button" onclick="filterKaryawanPicker()">
                                <i class="fas fa-search me-1"></i>Cari
                            </button>
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-hover align-items-center mb-0" id="karyawanPickerTable">
                            <thead style="background-color: #00b7bd4f;">
                                <tr>
                                    <th style="width: 80px;">Action</th>
                                    <th>NIK</th>
                                    <th>Nama</th>
                                    <th>Departemen</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody id="karyawanPickerBody"></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <style>
        .input-group > .form-control { height: calc(1.5em + 1rem + 2px); }
        .input-group > .input-group-text { height: calc(1.5em + 1rem + 2px); }
        .picker-search-wrap { max-width: 360px; width: 100%; flex-wrap: nowrap; align-items: stretch; }
        .picker-search-wrap > .form-control { height: calc(1.5em + 1rem + 2px); }
        .picker-search-wrap > .btn { height: calc(1.5em + 1rem + 2px); }
        .hover-row:hover { background-color: #f8f9fa; }
    </style>

    @push('js')
        <script>
            function applyMsjButtonStyle() {
                $('#spReportExportButtons .dt-button').addClass('btn btn-secondary mb-0 me-1');
                $('#spReportExportButtons .dt-button').removeClass('dt-button');
            }

            let karyawanPickerTable = null;
            let karyawanPickerData = [];

            function openKaryawanModal() {
                document.getElementById('karyawanPickerSearch').value = '';
                loadKaryawanPickerData();
                new bootstrap.Modal(document.getElementById('karyawanPickerModal')).show();
            }

            function loadKaryawanPickerData() {
                $.ajax({
                    url: '{{ url("/rptsp/get-karyawan") }}',
                    method: 'GET',
                    data: { query: '' },
                    success: function(response) {
                        if (response.success) {
                            if (karyawanPickerTable) { karyawanPickerTable.destroy(); karyawanPickerTable = null; }
                            renderKaryawanPickerRows(response.data || []);
                            initKaryawanPickerTable();
                        }
                    }
                });
            }

            function renderKaryawanPickerRows(data) {
                karyawanPickerData = data;
                const tbody = document.getElementById('karyawanPickerBody');
                if (!data.length) { tbody.innerHTML = ''; return; }
                let html = '';
                data.forEach((k, idx) => {
                    const isActive = String(k.isactive ?? '1') === '1';
                    const rowStyle = isActive ? '' : 'background-color:#ffe9ed;';
                    html += `<tr style="cursor:pointer;${rowStyle}" onclick="selectKaryawanFromModal(${idx})" class="hover-row">
                        <td><button type="button" class="btn btn-sm btn-primary" onclick="event.stopPropagation(); selectKaryawanFromModal(${idx})">Pilih</button></td>
                        <td>${escapeHtml(k.nik||'-')}</td>
                        <td>${escapeHtml(k.nama||'-')}</td>
                        <td>${escapeHtml(k.departemen||'-')}</td>
                        <td>${isActive ? 'Active' : 'Non Active'}</td>
                    </tr>`;
                });
                tbody.innerHTML = html;
            }

            function initKaryawanPickerTable() {
                if (karyawanPickerTable) { karyawanPickerTable.destroy(); karyawanPickerTable = null; }
                if ($.fn.DataTable.isDataTable('#karyawanPickerTable')) {
                    $('#karyawanPickerTable').DataTable().destroy();
                }
                karyawanPickerTable = $('#karyawanPickerTable').DataTable({
                    language: { zeroRecords: 'Tekan Tombol Cari Dahulu', info: 'Showing _START_ to _END_ of _TOTAL_ entries', infoEmpty: 'Showing 0 to 0 of 0 entries', infoFiltered: '(filtered from _MAX_ total entries)', paginate: { previous: '<i class="fas fa-angle-left"></i>', next: '<i class="fas fa-angle-right"></i>' } },
                    pageLength: 10, lengthChange: false, searching: true, ordering: true, order: [[1, 'asc']], responsive: true, pagingType: 'simple_numbers', dom: 'tip'
                });
            }

            function filterKaryawanPicker() {
                const keyword = document.getElementById('karyawanPickerSearch').value.trim();
                if (karyawanPickerTable) karyawanPickerTable.search(keyword).draw();
            }

            function selectKaryawanFromModal(index) {
                const karyawan = karyawanPickerData[index];
                if (!karyawan) return;
                document.getElementById('nik_hidden').value = karyawan.nik || '';
                document.getElementById('karyawan_pick').value = `${karyawan.nik || ''} - ${karyawan.nama || ''}`;
                bootstrap.Modal.getInstance(document.getElementById('karyawanPickerModal')).hide();
            }

            function escapeHtml(value) {
                return String(value||'').replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/\"/g,'"').replace(/'/g,'&#039;');
            }

            $(document).ready(function() {
                // Save list URL for back navigation
                const listUrl = window.location.href;
                localStorage.setItem('rptsp_list_url', listUrl);
                
                // Destroy existing DataTable if already initialized to prevent double init
                if ($.fn.DataTable.isDataTable('#list_{{ $dmenu }}')) {
                    $('#list_{{ $dmenu }}').DataTable().destroy();
                }
                
                // Initialize DataTable with buttons
                let table = $('#list_{{ $dmenu }}').DataTable({
                    lengthChange: false,
                    language: {
                        lengthMenu: 'Tampilkan _MENU_ baris',
                        zeroRecords: 'Tekan Tombol Cari Dahulu',
                        info: 'Data _START_ - _END_ dari _TOTAL_',
                        infoEmpty: 'Tidak ada data',
                        infoFiltered: '(pencarian dari _MAX_ data)',
                        paginate: {
                            previous: 'Previous',
                            next: 'Next'
                        }
                    },
                    searching: false,
                    paging: true,
                    pageLength: 10,
                    dom: 'Brtip',
                    buttons: [
                        { extend: 'excelHtml5', text: '<i class="fas fa-file-excel me-1 text-lg text-success"></i><span class="font-weight-bold"> Excel', title: 'Rekap SP', exportOptions: { columns: ':visible' } },
                        { extend: 'pdfHtml5', text: '<i class="fas fa-file-pdf me-1 text-lg text-danger"></i><span class="font-weight-bold"> PDF', title: 'Rekap SP', orientation: 'landscape', pageSize: 'A4', exportOptions: { columns: ':visible' } },
                        { extend: 'print', text: '<i class="fas fa-print me-1 text-lg text-info"></i><span class="font-weight-bold"> Print', title: 'Rekap SP', exportOptions: { columns: ':visible' } }
                    ]
                });

                table.buttons().container().appendTo('#spReportExportButtons');
                applyMsjButtonStyle();
                $('#list_{{ $dmenu }}_length').hide();
            });
        </script>
    @endpush
@endsection