@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')
                                        {{-- button import excel --}}
                                        <button type="button" class="btn btn-primary mb-0" data-bs-toggle="modal"
                                            data-bs-target="#importExcelModal">
                                            <i class="fas fa-file-import me-1"></i>
                                            <span class="font-weight-bold">Import</span>
                                        </button>
                                    @endif
                                </div>
                            </div>
                        </div>

                        <div class="row px-4 py-2">
                            <div class="col-lg">
                                <div class="row nav-wrapper">
                                    {{-- Filters (Year) --}}
                                    @if (!empty($years))
                                        <div class="col-md-4">
                                            <form method="GET" action="{{ url($url_menu) }}" class="d-inline">
                                                {{-- keep other filters --}}
                                                <input type="hidden" name="search" value="{{ request('search') }}">
                                                <select name="year" class="form-select form-select-sm"
                                                    onchange="this.form.submit()">
                                                    @foreach ($years as $y)
                                                        <option value="{{ (int) $y }}"
                                                            {{ (string) ($selectedYear ?? '') === (string) $y ? 'selected' : '' }}>
                                                            Tahun {{ (int) $y }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </form>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>

                        {{-- Import Excel Modal --}}
                        <div class="modal fade" id="importExcelModal" tabindex="-1" aria-labelledby="importExcelLabel"
                            aria-hidden="true">
                            <div class="modal-dialog modal-dialog-centered">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h6 class="modal-title" id="importExcelLabel">Import Excel - {{ $title_menu }}
                                        </h6>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                                            aria-label="Close"></button>
                                    </div>
                                    <form method="POST" action="{{ url($url_menu . '/import') }}"
                                        enctype="multipart/form-data">
                                        @csrf
                                        <div class="modal-body">
                                            <div class="mb-3">
                                                <label class="form-label">Pilih Tahun</label>
                                                <select name="year" class="form-select" required>
                                                    @if (!empty($years))
                                                        @foreach ($years as $y)
                                                            <option value="{{ (int) $y }}"
                                                                {{ (string) request('year', (string) ($selectedYear ?? date('Y'))) === (string) $y ? 'selected' : '' }}>
                                                                Tahun {{ (int) $y }}
                                                            </option>
                                                        @endforeach
                                                    @else
                                                        <option value="{{ (int) ($selectedYear ?? date('Y')) }}" selected>
                                                            Tahun {{ (int) ($selectedYear ?? date('Y')) }}
                                                        </option>
                                                    @endif
                                                </select>
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label">File Excel</label>
                                                <input type="file" name="file" class="form-control"
                                                    accept=".xlsx,.xls" required>
                                                <small class="text-muted">Format yang didukung: .xlsx, .xls</small>
                                            </div>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary"
                                                data-bs-dismiss="modal">Batal</button>
                                            <button type="submit" class="btn btn-primary">Import</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>

                        <div class="row px-4 py-2">
                            <div class="table-responsive">
                                <table class="display table" id="list_{{ $dmenu }}">
                                    <thead class="thead-light" style="background-color: #00b7bd4f;">
                                        <tr>
                                            <th width="80">Action</th>
                                            <th width="60">No</th>
                                            <th>Nama Karyawan</th>
                                            <th>Skor Academy</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @if(isset($rows) && method_exists($rows, 'items'))
                                            @foreach ($rows as $i => $r)
                                                <tr>
                                                    <td class="font-weight-normal text-sm">
                                                        <div class="btn-group">
                                                            <button class="btn btn-secondary btn-sm mb-0 px-3" type="button"
                                                                disabled>
                                                                <i class="fas fa-eye"></i>
                                                                <span class="font-weight-bold"> Lihat</span>
                                                            </button>
                                                        </div>
                                                    </td>
                                                    <td>{{ $rows->firstItem() + $i }}</td>
                                                    <td class="text-sm">{{ $r->full_name }}</td>
                                                    <td class="text-sm">{{ number_format((float) $r->score, 2) }}</td>
                                                </tr>
                                            @endforeach
                                        @endif
                                    </tbody>
                                </table>

                                <div class="d-flex justify-content-between align-items-center">
                                    <div>
                                        @if(isset($rows) && method_exists($rows, 'total'))
                                            Data {{ $rows->firstItem() ?? 0 }} - {{ $rows->lastItem() ?? 0 }}
                                            dari {{ $rows->total() }} data.
                                        @else
                                            Data 1 - {{ $rows ? $rows->count() : 0 }} dari {{ $rows ? $rows->count() : 0 }} data.
                                        @endif
                                    </div>
                                    <div>
                                        @if(isset($rows) && method_exists($rows, 'links'))
                                            {{ $rows->appends(request()->query())->links('pagination::bootstrap-4') }}
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

{{-- Optional per-page JS include gate --}}
@push('addjs')
    @if ($jsmenu == '1')
        @if (view()->exists("js.{$dmenu}"))
            @include("js.$dmenu")
        @else
            <script>
                Swal.fire({
                    title: 'JS Not Found!!',
                    text: 'Please Create File JS',
                    icon: 'error',
                    confirmButtonColor: '#028284'
                });
            </script>
        @endif
    @endif
@endpush

@push('js')
    <script>
        $(document).ready(function() {
            if ($.fn.DataTable.isDataTable('#list_{{ $dmenu }}')) {
                $('#list_{{ $dmenu }}').DataTable().destroy();
            }

            // set table into datatables
            const dt = $('#list_{{ $dmenu }}').DataTable({
                paging: false,
                info: false,
                searching: true,
                responsive: true,
                order: [
                    [1, 'asc']
                ], // Keep the sequence as rendered by server (No column)
                columnDefs: [{
                        targets: 0,
                        orderable: false
                    }, // Action column
                ],
                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)"
                },
                dom: '<"row d-flex justify-content-between align-items-center"<"col-lg-12 d-flex justify-content-between align-items-center"Bf>>rtip',
                buttons: [{
                        extend: 'excelHtml5',
                        text: '<i class="fas fa-file-excel me-1 text-lg text-success"></i><span class="font-weight-bold"> Excel</span>',
                        action: function() {
                            const params = new URLSearchParams(window.location.search);
                            params.set('export', 'excel');
                            window.location.href = "{{ url($url_menu) }}" + '?' + params
                                .toString();
                        }
                    },
                    {
                        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() {
                            const params = new URLSearchParams(window.location.search);
                            params.set('export', 'pdf');
                            window.location.href = "{{ url($url_menu) }}" + '?' + params
                                .toString();
                        }
                    },
                ],
                initComplete: function() {
                    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') }}\">
                                <input type=\"hidden\" name=\"year\" value=\"{{ request('year', $selectedYear ?? date('Y')) }}\">
                            </form>
                        </div>
                    `;
                    $('.dataTables_filter').remove();
                    $(searchBarHtml).insertAfter('.dt-buttons');
                }
            });

            // set DataTables buttons style
            $('.dt-button').addClass('btn btn-secondary');
            $('.dt-button').removeClass('dt-button');

            // permission-based buttons
            @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
        });

        // confirm delete / toggle active
        function deleteData(event, name, msg) {
            event.preventDefault();
            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) {
                    event.target.closest('form').submit();
                }
            });
        }
    </script>
@endpush