@extends('admin.layouts.app')

@section('title', 'Ratings Management')

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <!-- Header -->
    <div class="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-6">
        <div>
            <h1 class="text-3xl font-bold text-slate-900">Ratings & Reviews</h1>
            <p class="text-slate-600 mt-1">Manage employer ratings from healthcare workers</p>
        </div>
        <a href="{{ route('admin.ratings.export', request()->all()) }}" 
           class="admin-btn admin-btn-primary inline-flex items-center gap-2">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
            </svg>
            Export CSV
        </a>
    </div>

    @if(session('success'))
        <div class="mb-6 p-4 bg-green-50 border border-green-200 text-green-800 rounded-lg">
            {{ session('success') }}
        </div>
    @endif

    <!-- Statistics Cards -->
    <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-6 gap-4 mb-6">
        @include('admin.components.stat_card', ['label' => 'Total Ratings', 'value' => $stats['total'], 'icon' => 'fa-solid fa-star', 'color' => 'slate'])
        @include('admin.components.stat_card', ['label' => 'Verified', 'value' => $stats['verified'], 'icon' => 'fa-solid fa-badge-check', 'color' => 'emerald'])
        @include('admin.components.stat_card', ['label' => 'Recommended', 'value' => $stats['recommended'], 'icon' => 'fa-solid fa-thumbs-up', 'color' => 'blue'])
        @include('admin.components.stat_card', ['label' => 'Avg Overall', 'value' => $stats['avg_overall'], 'icon' => 'fa-solid fa-star-half-stroke', 'color' => 'amber'])
        @include('admin.components.stat_card', ['label' => 'Avg Fairness', 'value' => $stats['avg_fairness'], 'icon' => 'fa-solid fa-balance-scale', 'color' => 'purple'])
        @include('admin.components.stat_card', ['label' => 'Avg Comm.', 'value' => $stats['avg_communication'], 'icon' => 'fa-solid fa-comments', 'color' => 'indigo'])
    </div>

    <!-- Filters -->
    <div class="bg-white rounded-xl border border-slate-200 p-4 mb-6">
        <form method="GET" action="{{ route('admin.ratings.index') }}" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            <div>
                <label class="block text-sm font-semibold text-slate-700 mb-2">Search</label>
                <input type="text" name="search" value="{{ request('search') }}" 
                       placeholder="Employer, nurse, comment..."
                       class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>
            
            <div>
                <label class="block text-sm font-semibold text-slate-700 mb-2">Employer</label>
                <select name="employer_id" class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <option value="">All Employers</option>
                    @foreach($employers as $employer)
                        <option value="{{ $employer->id }}" {{ request('employer_id') == $employer->id ? 'selected' : '' }}>
                            {{ $employer->company_name }}
                        </option>
                    @endforeach
                </select>
            </div>

            <div>
                <label class="block text-sm font-semibold text-slate-700 mb-2">Verification</label>
                <select name="verified" class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <option value="">All</option>
                    <option value="true" {{ request('verified') === 'true' ? 'selected' : '' }}>Verified Only</option>
                    <option value="false" {{ request('verified') === 'false' ? 'selected' : '' }}>Unverified Only</option>
                </select>
            </div>

            <div>
                <label class="block text-sm font-semibold text-slate-700 mb-2">Recommendation</label>
                <select name="recommendation" class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <option value="">All</option>
                    <option value="true" {{ request('recommendation') === 'true' ? 'selected' : '' }}>Recommends</option>
                    <option value="false" {{ request('recommendation') === 'false' ? 'selected' : '' }}>Doesn't Recommend</option>
                </select>
            </div>

            <div>
                <label class="block text-sm font-semibold text-slate-700 mb-2">Min Score</label>
                <select name="min_score" class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <option value="">Any</option>
                    @for($i = 1; $i <= 5; $i++)
                        <option value="{{ $i }}" {{ request('min_score') == $i ? 'selected' : '' }}>{{ $i }}+</option>
                    @endfor
                </select>
            </div>

            <div>
                <label class="block text-sm font-semibold text-slate-700 mb-2">Max Score</label>
                <select name="max_score" class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <option value="">Any</option>
                    @for($i = 1; $i <= 5; $i++)
                        <option value="{{ $i }}" {{ request('max_score') == $i ? 'selected' : '' }}>{{ $i }}</option>
                    @endfor
                </select>
            </div>

            <div>
                <label class="block text-sm font-semibold text-slate-700 mb-2">Date From</label>
                <input type="date" name="date_from" value="{{ request('date_from') }}" 
                       class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>

            <div>
                <label class="block text-sm font-semibold text-slate-700 mb-2">Date To</label>
                <input type="date" name="date_to" value="{{ request('date_to') }}" 
                       class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>

            <div class="lg:col-span-4 flex gap-2">
                <button type="submit" class="admin-btn admin-btn-primary">
                    Apply Filters
                </button>
                <a href="{{ route('admin.ratings.index') }}" class="px-4 py-2 bg-slate-100 text-slate-700 rounded-lg hover:bg-slate-200 transition">
                    Clear
                </a>
            </div>
        </form>
    </div>

    <!-- Bulk Actions Bar (Hidden by default) -->
    <div id="bulkActionsBar" class="hidden bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
        <form id="bulkForm" method="POST" class="flex flex-wrap items-center gap-4">
            @csrf
            <span class="text-sm font-semibold text-blue-900">
                <span id="selectedCount">0</span> selected
            </span>
            
            <select name="action" id="bulkAction" class="px-3 py-2 border border-blue-300 rounded-lg bg-white focus:outline-none focus:ring-2 focus:ring-blue-500">
                <option value="">Choose action...</option>
                <option value="verify">Mark as Verified</option>
                <option value="unverify">Remove Verification</option>
                <option value="delete">Delete Selected</option>
            </select>

            <button type="button" onclick="executeBulkAction()" class="admin-btn admin-btn-primary">
                Execute
            </button>
            <button type="button" onclick="clearSelection()" class="px-4 py-2 bg-slate-100 text-slate-700 rounded-lg hover:bg-slate-200 transition">
                Clear Selection
            </button>
        </form>
    </div>

@php
    $headers = [
        ['label' => '<input type="checkbox" id="selectAll" onclick="toggleAll(this)" class="w-4 h-4 text-blue-600 rounded focus:ring-2 focus:ring-blue-500">', 'class' => 'w-12'],
        ['label' => 'Employer', 'class' => ''],
        ['label' => 'User', 'class' => ''],
        ['label' => 'Scores', 'class' => ''],
        ['label' => 'Status', 'class' => 'w-36'],
        ['label' => 'Date', 'class' => 'w-36'],
        ['label' => 'Actions', 'class' => 'text-right w-28'],
    ];

    $rows = [];
    foreach($ratings as $rating) {
        $cells = [];
        $cells[] = ['content' => '<input type="checkbox" name="rating_ids[]" value="' . $rating->id . '" onchange="updateSelection()" class="rating-checkbox w-4 h-4 text-blue-600 rounded focus:ring-2 focus:ring-blue-500">', 'class' => ''];

        $employerHtml = '';
        if($rating->employer?->logo_url) {
            $employerHtml = '<img src="' . $rating->employer->logo_url . '" alt="" class="w-10 h-10 rounded-lg object-cover">';
        } else {
            $employerHtml = '<div class="w-10 h-10 bg-slate-200 rounded-lg flex items-center justify-center"><i class="fa-solid fa-building text-slate-400"></i></div>';
        }
        $cells[] = ['content' => '<div class="flex items-center gap-3">' . $employerHtml . '<div><p class="font-semibold text-slate-900">' . e($rating->employer?->company_name ?? 'Unknown') . '</p></div></div>', 'class' => ''];

        $cells[] = ['content' => '<div><p class="font-semibold text-slate-900">' . e($rating->nurse?->name ?? 'Unknown') . '</p><p class="text-sm text-slate-500">' . e($rating->nurse?->email) . '</p></div>', 'class' => ''];

        $scoreHtml = '<div class="flex flex-col gap-1"><div class="flex items-center gap-2"><span class="text-xs font-semibold text-slate-600">Overall:</span><div class="flex items-center">';
        for($i = 1; $i <= 5; $i++) {
            if($i <= $rating->overall_score) {
                $scoreHtml .= '<i class="fa-solid fa-star w-4 h-4 text-amber-400"></i>';
            } else {
                $scoreHtml .= '<i class="fa-solid fa-star w-4 h-4 text-slate-300"></i>';
            }
        }
        $scoreHtml .= '<span class="ml-1 text-xs font-semibold text-slate-700">' . $rating->overall_score . '/5</span></div></div><div class="text-xs text-slate-500">F:' . $rating->fairness_score . ' | C:' . $rating->communication_score . ' | Cond:' . $rating->conditions_score . ' | S:' . $rating->support_score . '</div></div>';
        $cells[] = ['content' => $scoreHtml, 'class' => ''];

        $statusHtml = '';
        if($rating->is_verified_interaction) {
            $statusHtml .= '<span class="inline-flex items-center gap-1 px-2 py-1 bg-green-100 text-green-800 text-xs font-semibold rounded-full"><i class="fa-solid fa-check w-3 h-3"></i> Verified</span>';
        } else {
            $statusHtml .= '<span class="inline-flex px-2 py-1 bg-slate-100 text-slate-600 text-xs font-semibold rounded-full">Unverified</span>';
        }
        if($rating->would_recommend) {
            $statusHtml .= ' <span class="inline-flex items-center gap-1 px-2 py-1 bg-blue-100 text-blue-800 text-xs font-semibold rounded-full"><i class="fa-solid fa-thumbs-up w-3 h-3"></i> Recommends</span>';
        }
        $cells[] = ['content' => '<div class="flex flex-col gap-2">' . $statusHtml . '</div>', 'class' => ''];

        $cells[] = ['content' => '<div class="text-sm text-slate-600">' . e($rating->created_at->format('M d, Y')) . '</div>', 'class' => ''];

        $actionHtml = '<div class="flex items-center justify-end gap-2"><a href="' . route('admin.ratings.show', $rating) . '" class="p-2 text-blue-600 hover:bg-blue-50 rounded-lg transition"><i class="fa-solid fa-eye w-4 h-4"></i></a>';
        $actionHtml .= '<form action="' . route('admin.ratings.verify', $rating) . '" method="POST" class="inline">' . csrf_field() . method_field('PATCH') . '<button type="submit" class="p-2 ' . ($rating->is_verified_interaction ? 'text-slate-600' : 'text-green-600') . ' hover:bg-green-50 rounded-lg transition" title="' . ($rating->is_verified_interaction ? 'Remove verification' : 'Mark as verified') . '"><i class="fa-solid fa-check w-4 h-4"></i></button></form>';
        $actionHtml .= '</div>';
        $cells[] = ['content' => $actionHtml, 'class' => 'text-right'];

        $rows[] = ['cells' => $cells];
    }
@endphp

@include('admin.components.table_shell', [
    'headers' => $headers,
    'rows' => $rows,
    'emptyMessage' => 'No ratings found',
    'pagination' => $ratings
])



@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', () => {
    // Initialize bulk selection
    AdminUtils.initBulkSelection({
        selectAllId: 'selectAll',
        checkboxClass: 'rating-checkbox',
        selectedCountId: 'selectedCount',
        bulkActionsId: 'bulkActionsBar'
    });
});

function toggleAll(checkbox) {
    const checkboxes = document.querySelectorAll('.rating-checkbox');
    checkboxes.forEach(cb => cb.checked = checkbox.checked);
    AdminUtils.updateBulkSelection({
        selectAllId: 'selectAll',
        checkboxClass: 'rating-checkbox',
        selectedCountId: 'selectedCount',
        bulkActionsId: 'bulkActionsBar'
    });
}

function updateSelection() {
    AdminUtils.updateBulkSelection({
        selectAllId: 'selectAll',
        checkboxClass: 'rating-checkbox',
        selectedCountId: 'selectedCount',
        bulkActionsId: 'bulkActionsBar'
    });
}

function clearSelection() {
    document.querySelectorAll('.rating-checkbox').forEach(cb => cb.checked = false);
    document.getElementById('selectAll').checked = false;
    AdminUtils.updateBulkSelection({
        selectAllId: 'selectAll',
        checkboxClass: 'rating-checkbox',
        selectedCountId: 'selectedCount',
        bulkActionsId: 'bulkActionsBar'
    });
}

function executeBulkAction() {
    const action = document.getElementById('bulkAction').value;
    if (!action) {
        alert('Please select an action');
        return;
    }

    const checkedBoxes = document.querySelectorAll('.rating-checkbox:checked');
    if (checkedBoxes.length === 0) {
        alert('Please select at least one rating');
        return;
    }

    const form = document.getElementById('bulkForm');
    const ratingIds = Array.from(checkedBoxes).map(cb => cb.value);

    // Add hidden inputs for rating IDs
    form.innerHTML = {!! json_encode(csrf_field()) !!};
    ratingIds.forEach(id => {
        const input = document.createElement('input');
        input.type = 'hidden';
        input.name = 'rating_ids[]';
        input.value = id;
        form.appendChild(input);
    });

    if (action === 'delete') {
        if (!confirm(`Are you sure you want to delete ${ratingIds.length} ratings?`)) {
            return;
        }
        form.action = '{{ route("admin.ratings.bulk-delete") }}';
    } else {
        const actionInput = document.createElement('input');
        actionInput.type = 'hidden';
        actionInput.name = 'action';
        actionInput.value = action;
        form.appendChild(actionInput);
        form.action = '{{ route("admin.ratings.bulk-verify") }}';
    }

    form.submit();
}

function exportRatings() {
    window.location.href = '{{ route("admin.ratings.export") }}' + window.location.search;
}
</script>
@endpush
@endsection