@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg">
                    <div class="nav-wrapper">
                        @if ($authorize->add == '1')
                            <button class="btn btn-primary mb-0"
                                onclick="event.preventDefault(); document.getElementById('{{ $dmenu }}-form').submit();">
                                <i class="fas fa-bolt me-1"></i><span class="font-weight-bold">Execute</span>
                            </button>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-lg-5">
                <div class="card">
                    <form role="form" method="POST" action="{{ URL::to($url_menu) }}" id="{{ $dmenu }}-form">
                        @csrf
                        <div class="card-body">
                            <p class="text-uppercase text-sm">Filter {{ $title_menu }}</p>
                            <hr class="horizontal dark mt-0">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label class="form-control-label">Periode Tanggal</label>
                                        <div class="row">
                                            <div class="col-6">
                                                <input class="form-control" type="date" name="frdate" value="{{ old('frdate', date('Y-01-01')) }}">
                                            </div>
                                            <div class="col-6">
                                                <input class="form-control" type="date" name="todate" value="{{ old('todate', date('Y-12-31')) }}">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label class="form-control-label">Tahun</label>
                                        <select class="form-select" name="tahun">
                                            <option value="">Semua Tahun</option>
                                            @foreach ($tahunList as $th)
                                                <option value="{{ $th }}" {{ old('tahun') == $th ? 'selected' : '' }}>{{ $th }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label class="form-control-label">Departemen</label>
                                        <select class="form-select" name="departemen_id">
                                            <option value="">Semua Departemen</option>
                                            @foreach ($departemenList as $dept)
                                                <option value="{{ $dept->id }}" {{ old('departemen_id') == $dept->id ? 'selected' : '' }}>{{ $dept->nama }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label class="form-control-label">Status</label>
                                        <select class="form-select" name="status">
                                            <option value="">Semua Status</option>
                                            <option value="disetujui" {{ old('status') == 'disetujui' ? 'selected' : '' }}>Disetujui</option>
                                            <option value="ditolak" {{ old('status') == 'ditolak' ? 'selected' : '' }}>Ditolak</option>
                                            <option value="menunggu" {{ old('status') == 'menunggu' ? 'selected' : '' }}>Menunggu</option>
                                        </select>
                                    </div>
                                </div>
                            <div class="input-group">
                                <input type="text"
                                    class="form-control"
                                    id="search_nama_display"
                                    value="{{ old('search_nama') }}"
                                    placeholder="Pilih karyawan..."
                                    readonly
                                    style="cursor:pointer;"
                                    onclick="openKaryawanModal()">

                                <input type="hidden"
                                    name="search_nik"
                                    id="search_nik"
                                    value="{{ old('search_nik') }}">

                                <span class="input-group-text bg-primary text-light"
                                    onclick="openKaryawanModal()"
                                    style="cursor:pointer;">
                                    <i class="fas fa-search"></i>
                                </span>

                                <span class="input-group-text bg-danger text-light"
                                    onclick="clearKaryawan()"
                                    style="cursor:pointer;"
                                    title="Hapus Pilihan">
                                    <i class="fas fa-times"></i>
                                </span>
                            </div>
                            </div>
                            <hr class="horizontal dark">
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Karyawan Search Modal -->
    <div class="modal fade" id="karyawanModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Cari Karyawan</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="table-responsive">
                        <table class="table table-hover table-sm display" id="karyawanTable" style="width:100%">
                            <thead style="background-color: #00b7bd4f;">
                                <tr>
                                    <th>NIK</th>
                                    <th>Nama</th>
                                    <th>Departemen</th>
                                    <th>Jabatan</th>
                                    <th width="80">Aksi</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($karyawanList as $k)
                                    <tr>
                                        <td>{{ $k->nik }}</td>
                                        <td>{{ $k->nama }}</td>
                                        <td>{{ $k->departemen ?? '-' }}</td>
                                        <td>{{ $k->jabatan ?? '-' }}</td>
                                        <td>
                                            <button type="button" class="btn btn-sm btn-primary"
                                                onclick="selectKaryawan('{{ $k->nik }}', '{{ $k->nama }}')">
                                                Pilih
                                            </button>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script>
        let karyawanDt = null;

        function openKaryawanModal() {
            const modal = new bootstrap.Modal(document.getElementById('karyawanModal'));
            modal.show();
            if (!karyawanDt) {
                karyawanDt = $('#karyawanTable').DataTable({
                    pageLength: 10,
                    lengthChange: true,
                    ordering: 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)"
                    }
                });
            }
        }

        function selectKaryawan(nik, nama) {
            document.getElementById('search_nik').value = nik;
            document.getElementById('search_nama_display').value = nama + ' (' + nik + ')';
            bootstrap.Modal.getInstance(document.getElementById('karyawanModal')).hide();
        }

        function clearKaryawan() {
            document.getElementById('search_nik').value = '';
            document.getElementById('search_nama_display').value = '';
        }
    </script>
@endpush