@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">
                {{-- Mencari data secara async --}}
                <div class="card mb-4">
                    <div class="card-header col-md-auto"> {{-- Menyelaraskan judul --}}
                        <h5 class="mb-0">Pencarian</h5>
                    </div>
                    <hr class="horizontal dark mt-0">
                    <div class="card-body">
                        <div class="row">
                            {{-- Add pencarian bebas --}}
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="search">Pencarian Bebas</label>
                                    <input type="text" class="form-control" id="search" name="search"
                                        placeholder="Pencarian Bebas">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <button class="btn btn-primary" id="btn_cari">
                                    Cari
                                    <!-- Spinner (hidden by default) -->
                                    <div id="loading-spinner" class="spinner-border spinner-border-sm text-light"
                                        role="status" style="display: none; margin-left: 10px;">
                                        <span class="sr-only">Loading...</span>
                                    </div>
                                </button>
                                <script>
                                    $(document).ready(function() {
                                        $('#search').on('keypress', function(e) {
                                            if (e.which == 13) { // Enter key pressed
                                                $('#btn_cari').click(); // Trigger the button click event
                                            }
                                        });
                                    });
                                </script>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card mb-4"> {{-- Menambahkan margin bawah untuk jarak antar card --}}
                    <div class="card-header col-md-auto"> {{-- Menyelaraskan judul --}}
                        <h5 class="mb-0">List {{ $title_menu }}</h5>
                    </div>
                    <div class="col">
                        {{-- alert --}}
                        @include('components.alert')
                    </div>
                    <hr class="horizontal dark mt-0">
                    <div class="row px-4 py-2 mt-2">
                        <div class="col-lg">
                            <button class="btn btn-secondary mb-2" onclick="window.history.back()">
                                <i class="fas fa-arrow-left me-1"></i> Kembali
                            </button>
                        </div>
                    </div>
                    <div class="row px-4 py-2">
                        <div class="col-lg">
                            <div class="nav-wrapper">
                                {{-- check authorize add --}}
                                @if ($authorize->add == '1')
                                    {{-- button add --}}
                                    <button class="btn btn-primary mb-0"
                                        onclick="window.location='{{ URL::to($url_menu . '/add') }}'"><i
                                            class="fas fa-plus me-1"> </i><span class="font-weight-bold">Tambah</button>
                                @endif
                            </div>
                        </div>
                    </div>
                    <div class="row px-4 py-2">
                        <div class="table-responsive">
                            <table class="table display" id="list_{{ $dmenu }}">
                                <thead class="thead-light" style="background-color: #00b7bd4f;">
                                    <tr>
                                        <th>No</th>
                                        <th>Action</th>
                                        {{-- retrieve table header --}}
                                        @foreach ($table_header as $header)
                                            <th>{{ $header->alias }}</th>
                                        @endforeach
                                    </tr>
                                </thead>
                                <tbody>
                                    {{-- retrieve table detail --}}
                                    @foreach ($table_detail as $detail)
                                        @php
                                            $primary = '';
                                            foreach ($table_primary as $p) {
                                                $primary == ''
                                                    ? ($primary = $detail->{$p->field})
                                                    : ($primary = $primary . ':' . $detail->{$p->field});
                                            }
                                            $vcount = $loop->iteration;
                                        @endphp
                                        <tr
                                            {{ $detail->isactive == '0' ? 'class=not style=background-color:#ffe9ed;' : '' }}>
                                            <td>{{ $vcount }}</td>
                                            <td class="text-sm font-weight-normal">
                                                <div class="btn-group">
                                                    <!-- Tombol utama -->
                                                    <button type="button" class="btn btn-sm btn-primary mb-0"
                                                        title="View Data"
                                                        onclick="window.location='{{ url($url_menu . '/show' . '/' . encrypt($primary)) }}'">
                                                        <i class="fas fa-eye"></i> <span class="font-weight-bold">
                                                            View</span>
                                                    </button>
                                                </div>
                                            </td>
                                            @foreach ($table_header as $field)
                                                @php
                                                    $string = $field->field;
                                                @endphp
                                                {{-- field type enum --}}
                                                @if ($field->type == 'enum')
                                                    <td
                                                        class="text-sm font-weight-{{ $field->primary == '1' ? 'bold text-dark' : 'normal' }}">
                                                        @if ($field->link != '')
                                                            <a target="_blank"
                                                                href="{{ url($field->link . '/?id=' . encrypt($detail->$string)) }}">
                                                                @if ($field->query != '')
                                                                    @php
                                                                        $data_query = DB::select($field->query);
                                                                    @endphp
                                                                    @foreach ($data_query as $q)
                                                                        <br />
<b>Warning</b>:  Undefined variable $q in <b>/opt/lampp/htdocs/msjhris/resources/views/rbst12/pnrkhp/list.blade.php</b> on line <b>133</b><br />
                                                                        {{ $detail->$string == $sAsArray[0] ? $sAsArray[1] : '' }}
                                                                    @endforeach
                                                                @endif
                                                                &nbsp;&nbsp;
                                                                <i aria-hidden="true" class="fas fa-external-link-alt">
                                                                </i>
                                                            </a>
                                                        @else
                                                            @if ($field->query != '')
                                                                @php
                                                                    $data_query = DB::select($field->query);
                                                                @endphp
                                                                @foreach ($data_query as $q)
                                                                    <br />
<b>Warning</b>:  Undefined variable $q in <b>/opt/lampp/htdocs/msjhris/resources/views/rbst12/pnrkhp/list.blade.php</b> on line <b>147</b><br />
                                                                    {{ $detail->$string == $sAsArray[0] ? $sAsArray[1] : '' }}
                                                                @endforeach
                                                            @endif
                                                        @endif
                                                    </td>
                                                    {{-- field type file --}}
                                                @elseif ($field->type == 'file')
                                                    <td
                                                        class="text-sm font-weight-{{ $field->primary == '1' ? 'bold text-dark' : 'normal' }}">
                                                        @if ($detail->$string)
                                                            <a target="_blank"
                                                                class="btn btn-sm btn-outline-success mb-0 py-1 px-2"
                                                                href="{{ asset('/storage' . '/' . $detail->$string) }}">
                                                                <i aria-hidden="true" class="fas fa-file-lines text-lg">
                                                                </i>
                                                                {{ $field->alias }}</a>
                                                        @endif
                                                    </td>
                                                    {{-- field type image --}}
                                                @elseif($field->type == 'image')
                                                    <td
                                                        class="text-sm font-weight-{{ $field->primary == '1' ? 'bold text-dark' : 'normal' }}">
                                                        <span class="my-2 text-xs">
                                                            <img src="{{ asset('/storage' . '/' . $detail->$string) }}"
                                                                alt="image" style="height: 35px;" data-bs-toggle="modal"
                                                                data-bs-target="#imageModal{{ $field->field }}{{ $vcount }}">
                                                        </span>
                                                        <span
                                                            style="display: none;">{{ asset('/storage' . '/' . $detail->$string) }}
                                                        </span>
                                                        <!-- Modal -->
                                                        <div class="modal fade"
                                                            id="imageModal{{ $field->field }}{{ $vcount }}"
                                                            tabindex="-1" role="dialog" aria-labelledby="imageModalLabel"
                                                            aria-hidden="true">
                                                            <div class="modal-dialog modal-dialog-centered" role="document">
                                                                <div class="modal-content">
                                                                    <div class="modal-header">
                                                                        <h5 class="modal-title" id="imageModalLabel">
                                                                            Preview Image
                                                                        </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">
                                                                        <img src="{{ asset('/storage' . '/' . $detail->$string) }}"
                                                                            id="preview" alt="image"
                                                                            class="w-100 border-radius-lg shadow-sm">
                                                                    </div>
                                                                    <div class="modal-footer">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    {{-- field type join --}}
                                                @elseif($field->type == 'join')
                                                    <td
                                                        class="text-sm font-weight-{{ $field->primary == '1' ? 'bold text-dark' : 'normal' }}">
                                                        @if ($field->query != '')
                                                            @php
                                                                $query = $field->query . "'" . $detail->$string . "'";
                                                                $data_query = DB::select($query);
                                                            @endphp
                                                            @foreach ($data_query as $q)
                                                                <br />
<b>Warning</b>:  Undefined variable $q in <b>/opt/lampp/htdocs/msjhris/resources/views/rbst12/pnrkhp/list.blade.php</b> on line <b>215</b><br />
                                                                @if ($field->default != 'image')
                                                                    {{ $sAsArray[0] != '' ? $sAsArray[0] : '' }}
                                                                @else
                                                                    <span class="my-2 text-xs">
                                                                        <img src="{{ asset('/storage' . '/' . $sAsArray[0]) }}"
                                                                            alt="image" style="height: 40px;"
                                                                            data-bs-toggle="modal"
                                                                            data-bs-target="#imageModalJoin{{ $field->field }}{{ $vcount }}">
                                                                    </span>
                                                                    <span
                                                                        style="display: none;">{{ asset('/storage' . '/' . $sAsArray[0]) }}
                                                                    </span>
                                                                    <!-- Modal -->
                                                                    <div class="modal fade"
                                                                        id="imageModalJoin{{ $field->field }}{{ $vcount }}"
                                                                        tabindex="-1" role="dialog"
                                                                        aria-labelledby="imageModalJoinLabel"
                                                                        aria-hidden="true">
                                                                        <div class="modal-dialog modal-dialog-centered"
                                                                            role="document">
                                                                            <div class="modal-content">
                                                                                <div class="modal-header">
                                                                                    <h5 class="modal-title"
                                                                                        id="imageModalJoinLabel">
                                                                                        Preview Image
                                                                                    </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">
                                                                                    <img src="{{ asset('/storage' . '/' . $sAsArray[0]) }}"
                                                                                        id="preview" alt="image"
                                                                                        class="w-100 border-radius-lg shadow-sm">
                                                                                </div>
                                                                                <div class="modal-footer">
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                @endif
                                                            @endforeach
                                                        @endif
                                                    </td>
                                                    {{-- field type currency --}}
                                                @elseif ($field->type == 'currency')
                                                    <td
                                                        class="text-sm font-weight-{{ $field->primary == '1' ? 'bold text-dark' : 'normal' }}">
                                                        {{ $format->CurrencyFormat($detail->$string, $field->decimals, $field->sub) }}
                                                    </td>
                                                    {{-- field type date --}}
                                                @elseif ($field->type == 'date')
                                                    @php
                                                        if ($detail->$string != '') {
                                                            $dateValue = $detail->$string;
                                                            // Check if $dateValue is a valid date string and parse it accordingly
                                                            $formattedDate = \Carbon\Carbon::parse($dateValue)->format(
                                                                'd-m-Y H:i',
                                                            );
                                                        } else {
                                                            $formattedDate = '';
                                                        }
                                                    @endphp
                                                    <td
                                                        class="text-sm font-weight-{{ $field->primary == '1' ? 'bold text-dark' : 'normal' }} {{ $field->class == 'check-date' ? $detail->$string : '' }} text-end">
                                                        {{ $formattedDate }}
                                                    </td>
                                                    @if ($field->note != '')
                                                        <p id="datenote" style="display: none">
                                                            {{ $field->note }}
                                                        </p>
                                                    @else
                                                        <p id="datenote" style="display: none">Date Expired <=
                                                                {{ $field->length }} Day </p>
                                                    @endif
                                                    @if ($field->class == 'check-date')
                                                        <script>
                                                            var inputDate = new Date('{{ $detail->$string }}');
                                                            var currentDate = new Date();
                                                            var futureDate = new Date(currentDate.setDate(currentDate.getDate() + parseInt('{{ $field->length }}')));

                                                            if (inputDate <= futureDate) {
                                                                $('.{{ $detail->$string }}').parents('tr').addClass('exp');
                                                                $('.{{ $detail->$string }}').parents('tr').css('background-color', '#ffe768');
                                                            }
                                                        </script>
                                                    @endif
                                                @elseif ($field->type == 'number')
                                                    <td
                                                        class="text-sm font-weight-{{ $field->primary == '1' ? 'bold text-dark' : 'normal' }} text-end">
                                                        {{ $detail->$string }}
                                                    </td>
                                                @else
                                                    <td
                                                        class="text-sm font-weight-{{ $field->primary == '1' ? 'bold text-dark' : 'normal' }}">
                                                        @if ($field->link != '')
                                                            <a target="_blank"
                                                                href="{{ url($field->link . '/?id=' . encrypt($detail->$string)) }}">
                                                                {{ $detail->$string }}&nbsp;&nbsp;
                                                                <i aria-hidden="true" class="fas fa-external-link-alt">
                                                                </i>
                                                            </a>
                                                        @else
                                                            {{ $detail->$string }}
                                                        @endif
                                                    </td>
                                                @endif
                                            @endforeach
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        <div id="pagination-container" class="d-flex justify-content-between mt-4"
                            style="overflow-x: auto;">
                            @include('rbst12.pnrkhp.partials.pagination')
                        </div>
                    </div>
                    <div class="row px-4 py-2">
                        {{-- <div class="col-lg">
                            <div class="nav-wrapper" id="noted"><code>Note : <i aria-hidden="true"
                                            style="color: #ffc2cd;" class="fas fa-circle"></i> Data not active</code>
                            </div>
                        </div> --}}
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    {{-- check flag js on dmenu --}}
    @if ($jsmenu == '1')
        @if (view()->exists("js.{$dmenu}"))
            @push('addjs')
                {{-- file js in folder (resources/views/js) --}}
                @include('js.' . $dmenu);
            @endpush
        @else
            @push('addjs')
                <script>
                    Swal.fire({
                        title: 'JS Not Found!!',
                        text: 'Please Create File JS',
                        icon: 'error',
                        confirmButtonColor: '#028284'
                    });
                </script>
            @endpush
        @endif
    @endif
@endsection

@push('js')
    <script>
        let columnAbjad = '';
        $(document).ready(function() {
            let numColumns = $('#list_{{ $dmenu }}').DataTable().columns().count();
            let columnNames = '';
            for (let index = 0; index < numColumns; index++) {
                columnNames = $('#list_{{ $dmenu }}').DataTable().columns(index).header()[0].textContent;
                if (columnNames == 'Status' || columnNames == 'status') {
                    columnAbjad = String.fromCharCode(65 + index);
                }
            }
            //check class exp
            if ($('*').hasClass('exp')) {
                $('#noted').html(`<code>Note :( <i aria-hidden="true" style="color: #ffc2cd;"
                class="fas fa-circle"></i> Data not active ), ( <i aria-hidden="true"
                style="color: #ffe768;" class="fas fa-circle"></i> ` + $('#datenote').text() + ` )</code>`)
            }
        });

        //set table into datatables
        $('#list_{{ $dmenu }}').DataTable({
            "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)"
            },
            // Disable info, pagination, and search
            info: false,
            paging: false,
            searching: false,
            ordering: false,
            responsive: true,
            dom: 'frtip'
        });
    </script>

    {{-- Mencari data berdasarkan filter search AJAX --}}
    <script>
        // document on load
        $(function() {
            fetchPage(1);
        });

        $(document).on('click', '#btn_cari', function(event) {
            event.preventDefault();

            // Get current page
            let page = $('#pagination-container #pagination-links li.page-item.active span.page-link').text()
                .trim();

            // Fetch the data
            fetchPage(page);
        })

        $(document).on('click', '#pagination-links .pagination a', function(event) {
            event.preventDefault();

            // Get clicked page
            let url = $(this).attr('href'); // Ambil URL dari tombol yang diklik
            let page = new URL(url).searchParams.get('page'); // Ambil nilai page dari URL

            // Fetch the data
            fetchPage(page);
        });

        function fetchPage(page) {
            let tbody = "";

            // Tampilkan spinner dan disable button ketika tombol "Cari" diklik
            $('#loading-spinner').show();
            $('#btn_cari').prop('disabled', true);

            $('#pagination-links').hide();
            $('#pagination-loading').show();

            const search = $('#search').val();
            const user_id = @json($user_id);
            const baseurl = "{{ url('/') }}";

            $.ajax({
                url: "{{ url($url_menu) . '/ajax/filter' }}?page=" + page,
                method: 'GET',
                data: {
                    user_id,
                    search
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    // Gabungkan data
                    response.data.table_detail.data = response.data.table_detail.data.map((item, index) => {
                        item.ids = response.data.ids[index];
                        return item;
                    });

                    const dmenui = @json($dmenu);
                    let tbody = '';

                    if (response.data.table_detail.data.length === 0) {
                        tbody = `
                            <tr>
                                <td colspan="13" class="text-center text-muted py-3">
                                    Maaf - Data tidak ada.
                                </td>
                            </tr>`;
                    } else {
                        $.each(response.data.table_detail.data, function(index, row) {
                            // Tombol utama + dropdown
                            let actionButtons = `
                                <div class="btn-group">
                                    <button type="button" class="btn btn-sm btn-primary mb-0" title="View Data"
                                        onclick="window.location='${baseurl}/pnrkhp/show/${row.ids}'">
                                        <i class="fas fa-eye"></i> <span class="font-weight-bold">View</span>
                                    </button>
                                </div>`;

                            // Isi baris tabel
                            tbody += `
                                <tr>
                                    <td class="text-sm font-weight-normal">${row.row_num || ''}</td>
                                    <td class="text-sm font-weight-normal">${actionButtons}</td>
                                    <td class="text-sm font-weight-normal">${row.idreimburse || ''}</td>
                                    <td class="text-sm font-weight-normal">${row.idperizinan || ''}</td>
                                    <td class="text-sm font-weight-normal">${row.nama_karyawan || ''}</td>
                                    <td class="text-sm font-weight-normal">${row.nama_departemen || ''}</td>
                                    <td class="text-sm font-weight-normal">${row.kategori_perizinan || ''}</td>
                                    <td class="text-sm font-weight-normal">${row.tujuan_tugas || ''}</td>
                                    <td class="text-sm font-weight-normal">${row.alasan || ''}</td>
                                    <td class="text-sm font-weight-normal">${row.jam_keluar || ''}</td>
                                    <td class="text-sm font-weight-normal">${row.jam_masuk || ''}</td>
                                    <td class="text-sm font-weight-normal">${row.check_out || ''}</td>
                                    <td class="text-sm font-weight-normal">${row.check_in || ''}</td>
                                    <td class="text-sm font-weight-normal">
                                        <span class="${
                                            row.status === 'ditolak'
                                                ? 'text-danger'
                                                : row.status === 'disetujui'
                                                ? 'text-success'
                                                : ''
                                        } font-weight-bold">
                                            ${row.status || ''}
                                        </span>
                                    </td>
                                </tr>`;
                        });
                    }

                    // Ganti isi tabel dan pagination
                    $('#list_' + dmenui + ' tbody').html(tbody);
                    $('#pagination-container').html(response.pagination);
                },
                complete: function() {
                    $('#loading-spinner').hide();
                    $('#btn_cari').prop('disabled', false);
                    $('#pagination-links').show();
                    $('#pagination-loading').hide();
                },
                error: function(xhr, status, error) {
                    console.log('Error:', error);
                    Swal.fire({
                        title: 'Error',
                        text: 'Terjadi kesalahan: ' + error,
                        icon: 'error',
                        confirmButtonColor: '#028284'
                    });
                    $('#loading-spinner').hide();
                    $('#btn_cari').prop('disabled', false);
                }
            });
        }
    </script>
@endpush