@extends('layouts.main')
@section('title', $data['title'])
@section('content')
<style>
</style>
<div class="row align-items-center mb-4">
    <div class="col-auto">
        <h1 class="h5">All reviews</h1>
    </div>
</div>
<div class="row card">
    <div class="card-header">
        <form method="GET" action="{{ route('review.index') }}" class="row align-items-center w-100">
        <div class="col">
            <div class="d-flex align-items-center flex-nowrap gap-2">
                <label for="entries" class="text-muted mb-0">Show</label>
                <select id="entries" name="entries" class="form-select form-select-sm custom-select" onchange="this.form.submit()">
                        @foreach([10, 20, 30, 50, 75, 100] as $count)
                        <option value="{{ $count }}" {{ request('entries') == $count ? 'selected' : '' }}>{{ $count }}</option>
                    @endforeach
                </select>
                <span class="text-muted mb-0">entries</span>
            </div>
        </div>
        <div class="col-md-3">
            <div class="form-group mb-0">
                <input type="text"
                class="form-control form-control-sm"
                name="search"
                placeholder="Type & Enter"
                value="{{ request('search') }}"
                onkeydown="if(event.key === 'Enter') this.form.submit()">
            </div>
        </div>
        </form>
    </div>
    <div class="card-body pb-2">
    <div class="table-responsive">
        <table class="table mb-0 table-hover table-nowrap">
            <thead>
                <tr class="text-center">
                    <th>#</th>
                    <th>Product Name</th>
                    <th>Email</th>
                    <th>Name / Phone Number</th>
                    <th>Status</th>
                    <th>Rating</th>
                </tr>
            </thead>
            <tbody>
                @forelse($reviews as $key => $review)
                <tr class="text-center">
                    <td>{{ $key + 1 }}</td>
            
                    <td>
                        {{-- <img src="{{ asset($review->product->image ?? 'default.png') }}" alt="image" width="100" class="rounded-10"> --}}
                        {{ $review->product->product_name ?? '-' }}
                    </td>
            
                    <td>{{ $review->email ?? '-' }}</td>
            
                    <td>
                        {{ $review->name }} <br>
                        <small>{{ $review->phone_number }}</small>
                    </td>
            
                    <td>
                        {{-- @if($review->status != 0)
                            <span class="badge bg-success">Active</span>
                        @else
                            <span class="badge bg-danger">Inactive</span>
                        @endif --}}
                        
                        <div class="form-check form-switch d-inline-flex justify-content-center">
                            <input class="form-check-input status-toggle"
                                   type="checkbox"
                                   role="switch"
                                   data-id="{{ $review->id }}"
                                   onchange="updateStatus(this)"
                                   {{ $review->status ? 'checked' : '' }}>
                        </div>
                    </td>
            
                    <td>
                        @for ($i = 1; $i <= 5; $i++)
                            @if ($i <= $review->rating)
                                <i class="fa fa-star text-warning"></i>
                            @else
                                <i class="fa fa-star text-secondary"></i>
                            @endif
                        @endfor
                    </td>
                </tr>
                @empty
                    <tr>
                        <td colspan="8" class="text-center text-muted">No records found.</td>
                    </tr>
                @endforelse
            </tbody>
            
        </table>
        <div class="d-flex justify-content-between flex-wrap border-top pt-2">
            <p class="text-muted mb-0">
                Showing 
                <strong>{{ $reviews->firstItem() }}</strong> 
                to 
                <strong>{{ $reviews->lastItem() }}</strong> 
                of 
                <strong>{{ $reviews->total() }}</strong> 
                entries
            </p>
            <div class="pagination-links">
                {{ $reviews->links('pagination::bootstrap-4') }}
                {{-- {{ $reviews->links('pagination::bootstrap-5') }} --}}
            </div>
        </div>
        
    </div>
    </div>
</div>
@endsection('content')
@section('custom-scripts')
<script>
function updateStatus(id){
    var status = id.checked ? 1 : 0;
    var reviewId = $(id).data('id');
    $.ajax({
        url: "{{ route('review.change.status') }}",
        type: "POST",
        data: {
            _token: "{{ csrf_token() }}",
            id: reviewId,
            status: status
        },
        success: function(response) {
            if (response.success) {
                flasher.success("Status updated successfully.");
            } else {
                flasher.error("Error updating status:", response.message);
            }
        },
        error: function(xhr, status, error) {
            console.error("AJAX error:", error);
        }
    });
}
</script>
@endsection('custom-scripts')