@extends('layouts.app')

@section('content')
    <div class="content-wrapper">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">Log Pengajuan Surat</h5>
                    </div>
                    <div class="card-body">
                        {{-- Form Filter --}}
                        <div class="card mb-4">
                            <div class="card-header">Filter Data</div>
                            <div class="card-body">
                                <form id="filter-form">
                                    <div class="row g-3 align-items-end">
                                        <div class="col-md-3">
                                            <label for="nomor_induk" class="form-label">NIP/NIK</label>
                                            <input type="text" class="form-control" id="nomor_induk" name="nomor_induk"
                                                placeholder="Cari NIP/NIK...">
                                        </div>
                                        <div class="col-md-3">
                                            <label for="nama_user" class="form-label">Nama Pengguna</label>
                                            <input type="text" class="form-control" id="nama_user" name="nama_user"
                                                placeholder="Cari nama pengguna...">
                                        </div>
                                        <div class="col-md-3">
                                            <label for="perangkat_daerah_id" class="form-label">Perangkat Daerah</label>
                                            <select class="form-control" id="perangkat_daerah_id"
                                                name="perangkat_daerah_id">
                                                <option value="">-- Semua Perangkat Daerah --</option>
                                                {{-- Opsi akan diisi oleh Blade atau JavaScript --}}
                                                @foreach (\App\Models\PerangkatDaerah::all() as $pd)
                                                    <option value="{{ $pd->id }}">{{ $pd->nama_pd }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-md-3">
                                            <button type="button" class="btn btn-primary" id="filter-btn">Terapkan
                                                Filter</button>
                                            <button type="button" class="btn btn-secondary" id="reset-btn">Reset</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>

                        {{-- Tabel Log Pengajuan --}}
                        {{-- <div class="table-responsive"> --}}
                        <table class="table table-bordered datatable" id="log-pengajuan-table">
                            <thead>
                                <tr>
                                    <th>No. Pengajuan</th>
                                    <th>NIP/NIK</th>
                                    <th>Nama</th>
                                    <th>Perangkat Daerah</th>
                                    <th>Admin</th>
                                    <th>Status Lama</th>
                                    <th>Status Baru</th>
                                    <th>Tanggal</th>
                                </tr>
                            </thead>
                            <tbody>
                                {{-- Data akan dimuat oleh DataTables --}}
                            </tbody>
                        </table>
                        {{-- </div> --}}
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $(document).ready(function() {
            // Inisialisasi DataTables
            var table = $('#log-pengajuan-table').DataTable({
                processing: true,
                serverSide: true,
                responsive: {
                    details: {
                        type: 'column',
                        target: 0,
                        renderer: function(api, rowIdx, columns) {
                            var data = $.map(columns, function(col) {
                                return col.hidden ?
                                    '<tr data-dt-row="' + col.rowIndex + '" data-dt-column="' +
                                    col.columnIndex + '">' +
                                    '<td><strong>' + col.title + ':</strong></td> ' +
                                    '<td>' + col.data + '</td>' +
                                    '</tr>' :
                                    '';
                            }).join('');
                            return data ? $('<table/>').append(data) : false;
                        }
                    }
                },
                columnDefs: [{
                    className: 'control',
                    orderable: false,
                    targets: 0,
                    render: function(data, type, row, meta) {
                        // Icon plus/minus + nomor row
                        return '<i class="fas fa-plus-circle text-primary me-1"></i>' + (meta
                            .row + 1);
                    }
                }],
                ajax: {
                    url: "{{ route('logs.index') }}",
                    data: function(d) {
                        d.nomor_induk = $('#nomor_induk').val();
                        d.nama_user = $('#nama_user').val();
                        d.perangkat_daerah_id = $('#perangkat_daerah_id').val();
                    }
                },
                columns: [{
                        data: 'no_pengajuan',
                        name: 'pengajuanSurat.no_pengajuan'
                    },
                    {
                        data: 'nomor_induk',
                        name: 'pengajuanSurat.user.nomor_induk'
                    },
                    {
                        data: 'nama_user',
                        name: 'pengajuanSurat.user.name'
                    },
                    {
                        data: 'perangkat_daerah',
                        name: 'pengajuanSurat.user.perangkatDaerah.nama_pd',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'admin_name',
                        name: 'admin.name'
                    },
                    {
                        data: 'status_lama',
                        name: 'statusLama.nama_status',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'status_baru',
                        name: 'statusBaru.nama_status',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'tanggal',
                        name: 'created_at'
                    },
                ]
            });

            $('.datatable').on('click', 'td.control', function() {
                var icon = $(this).find('i');
                if (icon.hasClass('fa-plus-circle')) {
                    icon.removeClass('fa-plus-circle text-primary').addClass('fa-minus-circle text-danger');
                } else {
                    icon.removeClass('fa-minus-circle text-danger').addClass('fa-plus-circle text-primary');
                }
            });

            table.on('draw', function() {
                $('.datatable td.control i')
                    .removeClass('fa-minus-circle text-danger')
                    .addClass('fa-plus-circle text-primary');
            });

            // Event handler untuk tombol "Terapkan Filter"
            $('#filter-btn').click(function() {
                table.draw();
            });

            // Event handler untuk tombol "Reset"
            $('#reset-btn').click(function() {
                $('#filter-form').trigger("reset");
                table.draw();
            });
        });
    </script>
@endpush