@extends('dashboard.base')

@section('title', 'Ranking Izin Karyawan')

@section('content')
<div class="content-wrapper">
    <div class="row">
        <div class="col-md-12 grid-margin">
            <div class="row">
                <div class="col-12 col-xl-8 mb-4 mb-xl-0">
                    <h3 class="font-weight-bold">Ranking Karyawan Berdasarkan Izin</h3>
                    <h6 class="font-weight-normal mb-0" id="monthYearDisplay">
                        Bulan: {{ $months[$currentMonth] }} {{ $currentYear }}
                        <span class="text"> | Urutan: {{ $sort == 'desc' ? 'Terbanyak' : 'Tersedikit' }}</span>
                    </h6>
                </div>
                <div class="col-12 col-xl-4 text-right">
                    <div class="dropdown d-inline mr-2">
                        <button class="btn btn-sm btn-outline-primary dropdown-toggle" type="button" id="monthDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Pilih Bulan
                        </button>
                        <div class="dropdown-menu" aria-labelledby="monthDropdown">
                            @foreach($months as $key => $month)
                                <a class="dropdown-item month-select" href="#" data-month="{{ $key }}">{{ $month }}</a>
                            @endforeach
                        </div>
                    </div>
                    <div class="dropdown d-inline">
                        <button class="btn btn-sm btn-outline-primary dropdown-toggle" type="button" id="sortDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            {{ $sort == 'desc' ? 'Terbanyak Izin' : 'Tersedikit Izin' }}
                        </button>
                        <div class="dropdown-menu" aria-labelledby="sortDropdown">
                            <a class="dropdown-item sort-select" href="#" data-sort="desc">Terbanyak Izin</a>
                            <a class="dropdown-item sort-select" href="#" data-sort="asc">Tersedikit Izin</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- ... (bagian tabel tetap sama) ... -->


    <div class="row">
        <div class="col-md-12 grid-margin stretch-card">
            <div class="card">
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>Rank</th>
                                    <th>Nama Karyawan</th>
                                    <th>Jumlah Izin</th>
                                    <th>Detail</th>
                                </tr>
                            </thead>
                            <tbody id="rankingTableBody">
                                @forelse($ranking as $index => $user)
                                    <tr>
                                        <td>{{ $ranking->firstItem() + $index }}</td>
                                        <td>{{ $user->name }}</td>
                                        <td>{{ $user->permissions_count }}</td>
                                        <td>
                                            <a href="#" class="btn btn-sm btn-info view-detail"
                                               data-user-id="{{ $user->id }}"
                                               data-user-name="{{ $user->name }}">
                                                <i class="ti-eye"></i> Lihat
                                            </a>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="4" class="text-center">Tidak ada data izin bulan ini</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                    <div class="mt-3">
                        {{ $ranking->appends([
                            'month' => $currentMonth,
                            'year' => $currentYear,
                            'sort' => $sort
                        ])->links() }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


@endsection

<!-- Modal Detail Izin -->
<div class="modal fade" id="detailModal" tabindex="-1" role="dialog" aria-labelledby="detailModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header bg-info text-white">
                <h5 class="modal-title" id="detailModalLabel">
                    Detail Izin: <span id="userName"></span>
                </h5>
                <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <div class="modal-body">
                <!-- Statistik Izin -->
                <div class="row text-center mb-4">
                    <div class="col-md-4">
                        <div class="card bg-success text-white">
                            <div class="card-body">
                                <h4 id="acceptedCount">0</h4>
                                <p>Disetujui</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card bg-warning text-white">
                            <div class="card-body">
                                <h4 id="pendingCount">0</h4>
                                <p>Pending</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card bg-danger text-white">
                            <div class="card-body">
                                <h4 id="rejectedCount">0</h4>
                                <p>Ditolak</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Tab Detail -->
                <ul class="nav nav-tabs" id="permissionTabs" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" id="all-tab" data-toggle="tab" href="#allTab" role="tab">Semua</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="accepted-tab" data-toggle="tab" href="#acceptedTab" role="tab">Disetujui</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="pending-tab" data-toggle="tab" href="#pendingTab" role="tab">Pending</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="rejected-tab" data-toggle="tab" href="#rejectedTab" role="tab">Ditolak</a>
                    </li>
                </ul>

                <div class="tab-content mt-3" id="permissionTabContent">
                    <div class="tab-pane fade show active" id="allTab" role="tabpanel">
                        <div id="allPermissions"></div>
                    </div>
                    <div class="tab-pane fade" id="acceptedTab" role="tabpanel">
                        <div id="acceptedPermissions"></div>
                    </div>
                    <div class="tab-pane fade" id="pendingTab" role="tabpanel">
                        <div id="pendingPermissions"></div>
                    </div>
                    <div class="tab-pane fade" id="rejectedTab" role="tabpanel">
                        <div id="rejectedPermissions"></div>
                    </div>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</button>
            </div>
        </div>
    </div>
</div>


@push('script')
<script>
$(document).ready(function() {
    let currentMonth = {{ $currentMonth }};
    let currentYear = {{ $currentYear }};
    let currentSort = '{{ $sort }}';

    // Fungsi untuk memuat data ranking
    function loadRankingData() {
        $.ajax({
            url: '/toprank',
            type: 'GET',
            data: {
                month: currentMonth,
                year: currentYear,
                sort: currentSort
            },
            success: function(response) {
                $('#rankingTableBody').html($(response).find('#rankingTableBody').html());
                $('.pagination').html($(response).find('.pagination').html());
                $('#monthYearDisplay').text($(response).find('#monthYearDisplay').text());
            },
            error: function(xhr) {
                console.error('Error loading ranking data:', xhr);
            }
        });
    }

    // Handle pemilihan bulan
    $(document).on('click', '.month-select', function(e) {
        e.preventDefault();
        currentMonth = $(this).data('month');
        loadRankingData();
    });

    // Handle pemilihan sorting
    $(document).on('click', '.sort-select', function(e) {
        e.preventDefault();
        currentSort = $(this).data('sort');
        loadRankingData();
    });

    
    // Fungsi untuk render permissions
    function renderPermissions(permissions, targetId) {
        let html = '<div class="list-group">';
        
        if (permissions && permissions.length > 0) {
            permissions.forEach(function(permission) {
                let statusBadge = '';
                let statusClass = '';
                
                if (permission.status === 'accepted') {
                    statusBadge = 'Disetujui';
                    statusClass = 'success';
                } else if (permission.status === 'pending') {
                    statusBadge = 'Pending';
                    statusClass = 'warning';
                } else {
                    statusBadge = 'Ditolak';
                    statusClass = 'danger';
                }
                
                let proofPhoto = permission.proof_photo ? 
                    `<a href="/storage/permissions/${permission.proof_photo}" target="_blank" class="btn btn-sm btn-link mt-1">
                        <i class="ti-image"></i> Lihat Bukti
                    </a>` : '';
                
                let approvedInfo = permission.approved_at ? 
                    `<small class="text-muted d-block mt-1">
                        Disetujui pada: ${new Date(permission.approved_at).toLocaleDateString('id-ID')}
                    </small>` : '';
                
                html += `
                    <div class="list-group-item">
                        <div class="d-flex justify-content-between align-items-start">
                            <div>
                                <h6 class="mb-1 font-weight-bold">${permission.category}</h6>
                                <p class="mb-1">${permission.start_date} s/d ${permission.end_date}</p>
                                <p class="mb-1 small">Alasan: ${permission.reason}</p>
                            </div>
                            <span class="badge badge-${statusClass}">${statusBadge}</span>
                        </div>
                        ${proofPhoto}
                        <small class="text-muted d-block mt-1">
                            Diajukan pada: ${new Date(permission.created_at).toLocaleDateString('id-ID')}
                        </small>
                        ${approvedInfo}
                    </div>
                `;
            });
        } else {
            html += `
                <div class="list-group-item text-center py-4">
                    <i class="ti-info-alt" style="font-size: 2rem;"></i>
                    <p class="mt-2 mb-0">Tidak ada data izin</p>
                </div>
            `;
        }
        
        html += '</div>';
        $('#' + targetId).html(html);
    }

    // Handle modal detail
    $(document).on('click', '.view-detail', function(e) {
        e.preventDefault();
        const userId = $(this).data('user-id');
        const userName = $(this).data('user-name');
        
        // Tampilkan modal
        const modal = $('#detailModal');
        modal.find('#userName').text(userName);
        modal.modal('show');
        
        // Reset konten modal
        modal.find('#acceptedCount').text('0');
        modal.find('#pendingCount').text('0');
        modal.find('#rejectedCount').text('0');
        modal.find('#allPermissions').html('<div class="text-center py-4"><div class="spinner-border" role="status"></div></div>');
        modal.find('#acceptedPermissions').html('');
        modal.find('#pendingPermissions').html('');
        modal.find('#rejectedPermissions').html('');
        
        // AJAX untuk mengambil detail izin
        $.ajax({
            url: '/toprank/user/' + userId + '/permissions',
            type: 'GET',
            data: {
                month: currentMonth,
                year: currentYear
            },
            headers: {
                'Accept': 'application/json',
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                if (response.success) {
                    // Update counter
                    modal.find('#acceptedCount').text(response.stats.accepted);
                    modal.find('#pendingCount').text(response.stats.pending);
                    modal.find('#rejectedCount').text(response.stats.rejected);
                    
                    // Render permissions
                    renderPermissions(response.data.all, 'allPermissions');
                    renderPermissions(response.data.accepted, 'acceptedPermissions');
                    renderPermissions(response.data.pending, 'pendingPermissions');
                    renderPermissions(response.data.rejected, 'rejectedPermissions');
                } else {
                    modal.find('#allPermissions').html(`
                        <div class="alert alert-danger">
                            ${response.message || 'Gagal memuat data izin'}
                        </div>
                    `);
                }
            },
            error: function(xhr) {
                let errorMessage = 'Terjadi kesalahan saat memuat data';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    errorMessage = xhr.responseJSON.message;
                }
                modal.find('#allPermissions').html(`
                    <div class="alert alert-danger">
                        ${errorMessage}
                    </div>
                `);
            }
        });
    });
});
</script>
@endpush