@extends('admin.layouts.app')

@section('title', 'Değerlendirmeler')

@section('header', 'Değerlendirmeler')

@push('styles')
<!-- DataTables -->
<link rel="stylesheet" href="{{ asset('assets/admin/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css') }}">
<link rel="stylesheet" href="{{ asset('assets/admin/plugins/datatables-responsive/css/responsive.bootstrap4.min.css') }}">
<link rel="stylesheet" href="{{ asset('assets/admin/plugins/datatables-buttons/css/buttons.bootstrap4.min.css') }}">
@endpush

@section('content')
<div class="row mb-3">
    <div class="col-12">
        <div class="btn-group" role="group">
            <a href="{{ route('admin.evaluations.index', ['type' => 'staff']) }}"
               class="btn {{ $type === 'staff' ? 'btn-primary' : 'btn-default' }}">
                <i class="fas fa-user"></i> Personel Değerlendirmeleri
            </a>
            <a href="{{ route('admin.evaluations.index', ['type' => 'business']) }}"
               class="btn {{ $type === 'business' ? 'btn-primary' : 'btn-default' }}">
                <i class="fas fa-store"></i> İşletme Değerlendirmeleri
            </a>
        </div>

        <div class="float-right">
            <button type="button" class="btn btn-info" id="manageStaffBtn">
                <i class="fas fa-users-cog"></i> Personel Listesi
            </button>
            <a href="{{ route('admin.evaluations.clear-cache') }}" class="btn btn-warning"
               onclick="return confirm('Cache temizlenecek. Devam etmek istiyor musunuz?')">
                <i class="fas fa-sync"></i> Cache Temizle
            </a>
        </div>
    </div>
</div>

<!-- Quick Stats -->
<div class="row">
    <div class="col-lg-3 col-6">
        <div class="small-box bg-info">
            <div class="inner">
                <h3>{{ $stats['total'] }}</h3>
                <p>Toplam Değerlendirme</p>
            </div>
            <div class="icon">
                <i class="fas fa-comments"></i>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-6">
        <div class="small-box bg-success">
            <div class="inner">
                <h3>{{ $stats['average'] }}<sup style="font-size: 20px">/5</sup></h3>
                <p>Ortalama Puan</p>
            </div>
            <div class="icon">
                <i class="fas fa-star"></i>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-6">
        <div class="small-box bg-warning">
            <div class="inner">
                <h3>{{ $stats['this_month'] }}</h3>
                <p>Bu Ayki Değerlendirme</p>
            </div>
            <div class="icon">
                <i class="fas fa-calendar-alt"></i>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-6">
        <div class="small-box bg-primary">
            <div class="inner">
                <h3>{{ $stats['this_month_average'] }}<sup style="font-size: 20px">/5</sup></h3>
                <p>Bu Ayın Ortalaması</p>
            </div>
            <div class="icon">
                <i class="fas fa-chart-line"></i>
            </div>
        </div>
    </div>
</div>

@if($type === 'staff')
<!-- Quick Queries for Staff -->
<div class="row">
    <div class="col-md-12">
        <div class="card card-primary card-outline">
            <div class="card-header">
                <h3 class="card-title"><i class="fas fa-search"></i> Hızlı Sorgular</h3>
                <div class="card-tools">
                    <select id="monthFilter" class="form-control form-control-sm" style="width: 200px;">
                        <option value="current">Bu Ay</option>
                        <option value="last">Geçen Ay</option>
                        @for($i = 0; $i < 12; $i++)
                            <option value="{{ now()->subMonths($i)->format('Y-m') }}">
                                {{ now()->subMonths($i)->locale('tr')->translatedFormat('F Y') }}
                            </option>
                        @endfor
                    </select>
                </div>
            </div>
            <div class="card-body">
                <div id="quickStatsLoading" class="text-center" style="display: none;">
                    <i class="fas fa-spinner fa-spin fa-2x"></i>
                    <p class="mt-2">Yükleniyor...</p>
                </div>
                <div id="quickStatsContent">
                <div class="row">
                    <div class="col-md-3">
                        <div class="info-box bg-success">
                            <span class="info-box-icon"><i class="fas fa-trophy"></i></span>
                            <div class="info-box-content">
                                <span class="info-box-text">Bu Ayın En Yüksek Puanlısı</span>
                                <span class="info-box-number" id="topPerformerName">{{ $stats['top_performer']['name'] ?? 'Veri Yok' }}</span>
                                @if(isset($stats['top_performer']))
                                    <div class="progress">
                                        <div class="progress-bar" id="topPerformerProgress" style="width: {{ ($stats['top_performer']['average'] / 5) * 100 }}%"></div>
                                    </div>
                                    <span class="progress-description" id="topPerformerScore">{{ $stats['top_performer']['average'] }}/5 Puan</span>
                                @endif
                            </div>
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="info-box bg-danger">
                            <span class="info-box-icon"><i class="fas fa-exclamation-triangle"></i></span>
                            <div class="info-box-content">
                                <span class="info-box-text">Bu Ayın En Düşük Puanlısı</span>
                                <span class="info-box-number" id="bottomPerformerName">{{ $stats['bottom_performer']['name'] ?? 'Veri Yok' }}</span>
                                @if(isset($stats['bottom_performer']))
                                    <div class="progress">
                                        <div class="progress-bar" id="bottomPerformerProgress" style="width: {{ ($stats['bottom_performer']['average'] / 5) * 100 }}%"></div>
                                    </div>
                                    <span class="progress-description" id="bottomPerformerScore">{{ $stats['bottom_performer']['average'] }}/5 Puan</span>
                                @endif
                            </div>
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="info-box bg-info">
                            <span class="info-box-icon"><i class="fas fa-chart-bar"></i></span>
                            <div class="info-box-content">
                                <span class="info-box-text">Son 7 Günün Ortalaması</span>
                                <span class="info-box-number">{{ $stats['last_7_days_average'] }}/5</span>
                                <div class="progress">
                                    <div class="progress-bar" style="width: {{ ($stats['last_7_days_average'] / 5) * 100 }}%"></div>
                                </div>
                                <span class="progress-description">Genel Performans</span>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="info-box bg-warning">
                            <span class="info-box-icon"><i class="fas fa-user-check"></i></span>
                            <div class="info-box-content">
                                <span class="info-box-text">En Çok Değerlendirilen</span>
                                <span class="info-box-number">{{ $stats['most_evaluated']['name'] ?? 'Veri Yok' }}</span>
                                @if(isset($stats['most_evaluated']))
                                    <span class="progress-description">{{ $stats['most_evaluated']['count'] }} Değerlendirme</span>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endif

<!-- Evaluations Table -->
<div class="card">
    <div class="card-header">
        <h3 class="card-title">
            @if($type === 'staff')
                <i class="fas fa-user"></i> Personel Değerlendirmeleri
            @else
                <i class="fas fa-store"></i> İşletme Değerlendirmeleri
            @endif
        </h3>
    </div>
    <div class="card-body">
        <table id="evaluationsTable" class="table table-bordered table-striped table-hover">
            <thead>
                <tr>
                    @if($type === 'staff')
                        <th>Tarih</th>
                        <th>Saat</th>
                        <th>Personel</th>
                        <th>Davranış</th>
                        <th>Servis Hızı</th>
                        <th>Müşteri İlgisi</th>
                        <th>Ortalama</th>
                        <th>Yorum</th>
                    @else
                        <th>Tarih</th>
                        <th>Saat</th>
                        <th>Genel Memnuniyet</th>
                        <th>Ürün Kalitesi</th>
                        <th>Temizlik</th>
                        <th>Hizmet Hızı</th>
                        <th>Fiyat/Performans</th>
                        <th>Ortalama</th>
                        <th>Yorum</th>
                    @endif
                </tr>
            </thead>
            <tbody>
                @foreach($evaluations as $eval)
                    <tr>
                        @if($type === 'staff')
                            <td>{{ $eval['date'] }}</td>
                            <td>{{ $eval['time'] }}</td>
                            <td><strong>{{ $eval['staff_name'] }}</strong></td>
                            <td>{!! str_repeat('<i class="fas fa-star text-warning"></i>', $eval['behavior']) !!}</td>
                            <td>{!! str_repeat('<i class="fas fa-star text-warning"></i>', $eval['service_speed']) !!}</td>
                            <td>{!! str_repeat('<i class="fas fa-star text-warning"></i>', $eval['customer_care']) !!}</td>
                            <td>
                                <span class="badge badge-{{ $eval['average'] >= 4 ? 'success' : ($eval['average'] >= 3 ? 'warning' : 'danger') }}">
                                    {{ $eval['average'] }}/5
                                </span>
                            </td>
                            <td>
                                @if(!empty($eval['comment']))
                                    <button type="button" class="btn btn-sm btn-info" onclick="showComment('{{ addslashes($eval['comment']) }}')">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                @else
                                    <span class="text-muted">-</span>
                                @endif
                            </td>
                        @else
                            <td>{{ $eval['date'] }}</td>
                            <td>{{ $eval['time'] }}</td>
                            <td>{!! str_repeat('<i class="fas fa-star text-warning"></i>', $eval['general_satisfaction']) !!}</td>
                            <td>{!! str_repeat('<i class="fas fa-star text-warning"></i>', $eval['product_quality']) !!}</td>
                            <td>{!! str_repeat('<i class="fas fa-star text-warning"></i>', $eval['cleanliness']) !!}</td>
                            <td>{!! str_repeat('<i class="fas fa-star text-warning"></i>', $eval['service_speed']) !!}</td>
                            <td>{!! str_repeat('<i class="fas fa-star text-warning"></i>', $eval['price_performance']) !!}</td>
                            <td>
                                <span class="badge badge-{{ $eval['average'] >= 4 ? 'success' : ($eval['average'] >= 3 ? 'warning' : 'danger') }}">
                                    {{ $eval['average'] }}/5
                                </span>
                            </td>
                            <td>
                                @if(!empty($eval['comment']))
                                    <button type="button" class="btn btn-sm btn-info" onclick="showComment('{{ addslashes($eval['comment']) }}')">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                @else
                                    <span class="text-muted">-</span>
                                @endif
                            </td>
                        @endif
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

<!-- Staff Management Modal -->
<div class="modal fade" id="staffModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header bg-primary">
                <h5 class="modal-title"><i class="fas fa-users-cog"></i> Personel Listesi Yönetimi</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <button type="button" class="btn btn-success mb-3" id="addStaffBtn">
                    <i class="fas fa-plus"></i> Yeni Personel Ekle
                </button>

                <table id="staffTable" class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th>Personel Adı</th>
                            <th>Durum</th>
                            <th>Eklenme Tarihi</th>
                            <th>İşlem</th>
                        </tr>
                    </thead>
                    <tbody id="staffTableBody">
                        <!-- Loaded via AJAX -->
                    </tbody>
                </table>

                <div class="alert alert-info mt-3">
                    <i class="fas fa-info-circle"></i> <strong>Not:</strong> "Inactive" (Pasif) personeller değerlendirme formlarında gözükmez.
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Kapat</button>
            </div>
        </div>
    </div>
</div>

<!-- Add/Edit Staff Modal -->
<div class="modal fade" id="staffFormModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header bg-success">
                <h5 class="modal-title" id="staffFormModalTitle">Yeni Personel Ekle</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <form id="staffForm">
                <div class="modal-body">
                    <input type="hidden" id="staffRowNumber">

                    <div class="form-group">
                        <label for="staffName">Personel Adı <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="staffName" required>
                    </div>

                    <div class="form-group">
                        <label for="staffStatus">Durum <span class="text-danger">*</span></label>
                        <select class="form-control" id="staffStatus" required>
                            <option value="Active">Aktif</option>
                            <option value="Inactive">Pasif</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">İptal</button>
                    <button type="submit" class="btn btn-success">Kaydet</button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<!-- DataTables -->
<script src="{{ asset('assets/admin/plugins/datatables/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('assets/admin/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
<script src="{{ asset('assets/admin/plugins/datatables-responsive/js/dataTables.responsive.min.js') }}"></script>
<script src="{{ asset('assets/admin/plugins/datatables-responsive/js/responsive.bootstrap4.min.js') }}"></script>
<script src="{{ asset('assets/admin/plugins/datatables-buttons/js/dataTables.buttons.min.js') }}"></script>
<script src="{{ asset('assets/admin/plugins/datatables-buttons/js/buttons.bootstrap4.min.js') }}"></script>
<script src="{{ asset('assets/admin/plugins/jszip/jszip.min.js') }}"></script>
<script src="{{ asset('assets/admin/plugins/pdfmake/pdfmake.min.js') }}"></script>
<script src="{{ asset('assets/admin/plugins/pdfmake/vfs_fonts.js') }}"></script>
<script src="{{ asset('assets/admin/plugins/datatables-buttons/js/buttons.html5.min.js') }}"></script>
<script src="{{ asset('assets/admin/plugins/datatables-buttons/js/buttons.print.min.js') }}"></script>

<script>
$(document).ready(function() {
    // Initialize DataTable
    $('#evaluationsTable').DataTable({
        responsive: true,
        lengthChange: true,
        autoWidth: false,
        order: [[0, 'desc'], [1, 'desc']],
        pageLength: 25,
        buttons: [
            {
                extend: 'excel',
                text: '<i class="fas fa-file-excel"></i> Excel',
                exportOptions: {
                    columns: ':visible'
                }
            },
            {
                extend: 'pdf',
                text: '<i class="fas fa-file-pdf"></i> PDF',
                exportOptions: {
                    columns: ':visible'
                }
            },
            {
                extend: 'print',
                text: '<i class="fas fa-print"></i> Yazdır',
                exportOptions: {
                    columns: ':visible'
                }
            }
        ],
        language: {
            url: '//cdn.datatables.net/plug-ins/1.13.7/i18n/tr.json'
        }
    }).buttons().container().appendTo('#evaluationsTable_wrapper .col-md-6:eq(0)');

    // Show Comment
    window.showComment = function(comment) {
        Swal.fire({
            title: 'Yorum',
            html: '<div class="text-left">' + comment + '</div>',
            icon: 'info',
            confirmButtonColor: '#3085d6'
        });
    };

    // Manage Staff Button
    $('#manageStaffBtn').click(function() {
        loadStaff();
        $('#staffModal').modal('show');
    });

    // Add Staff Button
    $('#addStaffBtn').click(function() {
        $('#staffFormModalTitle').text('Yeni Personel Ekle');
        $('#staffRowNumber').val('');
        $('#staffName').val('');
        $('#staffStatus').val('Aktif');
        $('#staffFormModal').modal('show');
    });

    // Load Staff List
    function loadStaff() {
        $('#staffTableBody').html('<tr><td colspan="4" class="text-center"><i class="fas fa-spinner fa-spin"></i> Yükleniyor...</td></tr>');

        $.ajax({
            url: '{{ route("admin.evaluations.staff.list") }}',
            method: 'GET',
            success: function(response) {
                if (response.success) {
                    renderStaffTable(response.staff);
                }
            },
            error: function() {
                $('#staffTableBody').html('<tr><td colspan="4" class="text-center text-danger">Personel listesi yüklenirken bir hata oluştu.</td></tr>');
                toastr.error('Personel listesi yüklenirken bir hata oluştu.');
            }
        });
    }

    // Render Staff Table
    function renderStaffTable(staff) {
        let html = '';
        staff.forEach(function(item) {
            const statusBadge = (item.status === 'Active' || item.status === 'Aktif')
                ? '<span class="badge badge-success">Aktif</span>'
                : '<span class="badge badge-danger">Pasif</span>';

            html += `
                <tr>
                    <td>${item.name}</td>
                    <td>${statusBadge}</td>
                    <td>${item.created_at}</td>
                    <td>
                        <button class="btn btn-sm btn-warning" onclick="editStaff(${item.row_number}, '${item.name}', '${item.status}')">
                            <i class="fas fa-edit"></i>
                        </button>
                        <button class="btn btn-sm btn-danger" onclick="deleteStaff(${item.row_number}, '${item.name}')">
                            <i class="fas fa-trash"></i>
                        </button>
                    </td>
                </tr>
            `;
        });
        $('#staffTableBody').html(html);
    }

    // Edit Staff
    window.editStaff = function(rowNumber, name, status) {
        $('#staffFormModalTitle').text('Personel Düzenle');
        $('#staffRowNumber').val(rowNumber);
        $('#staffName').val(name);
        $('#staffStatus').val(status);
        $('#staffFormModal').modal('show');
    };

    // Delete Staff
    window.deleteStaff = function(rowNumber, name) {
        Swal.fire({
            title: 'Emin misiniz?',
            text: name + " adlı personeli silmek istediğinize emin misiniz? Bu personele ait değerlendirmeler silinmeyecektir.",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#3085d6',
            confirmButtonText: 'Evet, sil!',
            cancelButtonText: 'İptal',
            showLoaderOnConfirm: true,
            preConfirm: () => {
                return $.ajax({
                    url: '{{ route("admin.evaluations.staff.delete", ":row") }}'.replace(':row', rowNumber),
                    method: 'DELETE',
                    data: {
                        _token: '{{ csrf_token() }}'
                    }
                }).then(response => {
                    if (response.success) {
                        toastr.success(response.message);
                        loadStaff();
                    }
                    return response;
                }).fail(() => {
                    Swal.showValidationMessage('Personel silinirken bir hata oluştu.');
                });
            },
            allowOutsideClick: () => !Swal.isLoading()
        });
    };

    // Staff Form Submit
    $('#staffForm').submit(function(e) {
        e.preventDefault();

        const submitBtn = $(this).find('button[type="submit"]');
        const originalText = submitBtn.html();
        submitBtn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> İşleniyor...');

        const rowNumber = $('#staffRowNumber').val();
        const data = {
            name: $('#staffName').val(),
            status: $('#staffStatus').val(),
            _token: '{{ csrf_token() }}'
        };

        const url = rowNumber
            ? '{{ route("admin.evaluations.staff.update", ":row") }}'.replace(':row', rowNumber)
            : '{{ route("admin.evaluations.staff.add") }}';

        const method = rowNumber ? 'PUT' : 'POST';

        $.ajax({
            url: url,
            method: method,
            data: data,
            success: function(response) {
                if (response.success) {
                    toastr.success(response.message);
                    $('#staffFormModal').modal('hide');
                    loadStaff();
                }
            },
            error: function(xhr) {
                let errorMsg = 'İşlem sırasında bir hata oluştu.';
                if (xhr.responseJSON && xhr.responseJSON.errors) {
                    errorMsg = Object.values(xhr.responseJSON.errors).flat().join('<br>');
                }
                toastr.error(errorMsg);
            },
            complete: function() {
                submitBtn.prop('disabled', false).html(originalText);
            }
        });
    });

    // Month Filter for Quick Stats (Staff Evaluations Only)
    @if($type === 'staff')
    $('#monthFilter').change(function() {
        const selectedMonth = $(this).val();
        loadQuickStats(selectedMonth);
    });

    function loadQuickStats(month) {
        $('#quickStatsLoading').show();
        $('#quickStatsContent').hide();

        $.ajax({
            url: '{{ route("admin.evaluations.quickStats") }}',
            method: 'GET',
            data: { month: month },
            success: function(response) {
                updateQuickStats(response);
                $('#quickStatsLoading').hide();
                $('#quickStatsContent').show();
            },
            error: function() {
                toastr.error('İstatistikler yüklenirken bir hata oluştu.');
                $('#quickStatsLoading').hide();
                $('#quickStatsContent').show();
            }
        });
    }

    function updateQuickStats(stats) {
        // Update top performer
        if (stats.top_performer) {
            $('#topPerformerName').text(stats.top_performer.name);
            $('#topPerformerScore').text(stats.top_performer.average + '/5 Puan');
            $('#topPerformerProgress').css('width', (stats.top_performer.average / 5 * 100) + '%');
        } else {
            $('#topPerformerName').text('Veri Yok');
            $('#topPerformerScore').text('');
            $('#topPerformerProgress').css('width', '0%');
        }

        // Update bottom performer
        if (stats.bottom_performer) {
            $('#bottomPerformerName').text(stats.bottom_performer.name);
            $('#bottomPerformerScore').text(stats.bottom_performer.average + '/5 Puan');
            $('#bottomPerformerProgress').css('width', (stats.bottom_performer.average / 5 * 100) + '%');
        } else {
            $('#bottomPerformerName').text('Veri Yok');
            $('#bottomPerformerScore').text('');
            $('#bottomPerformerProgress').css('width', '0%');
        }
    }
    @endif
});
</script>
@endpush