@extends('layouts.app')
@section('title', 'Customer Feedback & Complaints')
@section('content')
<h4 class="mb-3">Customer Feedback &amp; Complaints</h4>

<div class="row g-3 mb-3">
    <div class="col-6 col-md-3"><div class="card p-3"><div class="text-muted small">Average Rating</div><div class="fs-3 fw-bold">{{ $avgRating ? number_format($avgRating, 1) . ' ★' : '—' }}</div></div></div>
    <div class="col-6 col-md-3"><div class="card p-3"><div class="text-muted small">Open Complaints</div><div class="fs-3 fw-bold {{ $openComplaints > 0 ? 'text-warning' : '' }}">{{ $openComplaints }}</div></div></div>
</div>

<div class="row g-4">
    <div class="col-md-6">
        <div class="d-flex justify-content-between">
            <h6>Feedback</h6>
            <button class="btn btn-outline-dark btn-sm" data-bs-toggle="modal" data-bs-target="#addFeedback">+ Log Feedback</button>
        </div>
        @forelse ($feedback as $f)
        <div class="card p-2 mb-2">
            <div class="d-flex justify-content-between">
                <strong>{{ $f->customer->name ?? $f->customer_name ?? 'Guest' }}</strong>
                @if ($f->rating)<span>{{ str_repeat('★', $f->rating) }}{{ str_repeat('☆', 5 - $f->rating) }}</span>@endif
            </div>
            @if ($f->comment)<div class="small text-muted">{{ $f->comment }}</div>@endif
            <div class="small text-muted">{{ $f->created_at->format('d M Y') }}</div>
        </div>
        @empty
        <p class="text-muted">No feedback logged yet.</p>
        @endforelse
    </div>

    <div class="col-md-6">
        <div class="d-flex justify-content-between">
            <h6>Complaints</h6>
            <button class="btn btn-outline-dark btn-sm" data-bs-toggle="modal" data-bs-target="#addComplaint">+ Log Complaint</button>
        </div>
        @forelse ($complaints as $c)
        <div class="card p-2 mb-2 {{ $c->status === 'open' ? 'border-danger' : '' }}">
            <div class="d-flex justify-content-between">
                <strong>{{ $c->customer->name ?? $c->customer_name ?? 'Guest' }} — {{ ucfirst(str_replace('_',' ',$c->category)) }}</strong>
                <span class="badge bg-secondary">{{ ucfirst($c->status) }}</span>
            </div>
            <div class="small">{{ $c->description }}</div>
            @if ($c->resolution_notes)<div class="small text-success">Resolution: {{ $c->resolution_notes }}</div>@endif
            @if ($c->status !== 'resolved')
            <form method="POST" action="{{ route('admin.customer-feedback.complaints.update', $c) }}" class="d-flex gap-1 mt-1">
                @csrf @method('PATCH')
                <select name="status" class="form-select form-select-sm">
                    <option value="open" {{ $c->status === 'open' ? 'selected' : '' }}>Open</option>
                    <option value="investigating" {{ $c->status === 'investigating' ? 'selected' : '' }}>Investigating</option>
                    <option value="resolved">Resolved</option>
                </select>
                <input name="resolution_notes" class="form-control form-control-sm" placeholder="Resolution notes">
                <button class="btn btn-sm btn-outline-dark">Update</button>
            </form>
            @endif
        </div>
        @empty
        <p class="text-muted">No complaints logged.</p>
        @endforelse
    </div>
</div>

<div class="modal fade" id="addFeedback" tabindex="-1">
    <div class="modal-dialog"><div class="modal-content">
        <form method="POST" action="{{ route('admin.customer-feedback.feedback.store') }}">
            @csrf
            <div class="modal-header"><h5>Log Customer Feedback</h5></div>
            <div class="modal-body">
                <div class="mb-2"><label class="form-label">Customer Name</label><input name="customer_name" class="form-control"></div>
                <div class="mb-2"><label class="form-label">Phone</label><input name="customer_phone" class="form-control"></div>
                <div class="mb-2"><label class="form-label">Rating (1-5)</label><input type="number" name="rating" min="1" max="5" class="form-control"></div>
                <div class="mb-2"><label class="form-label">Comment</label><textarea name="comment" class="form-control"></textarea></div>
            </div>
            <div class="modal-footer"><button class="btn btn-dark">Save</button></div>
        </form>
    </div></div>
</div>

<div class="modal fade" id="addComplaint" tabindex="-1">
    <div class="modal-dialog"><div class="modal-content">
        <form method="POST" action="{{ route('admin.customer-feedback.complaints.store') }}">
            @csrf
            <div class="modal-header"><h5>Log Customer Complaint</h5></div>
            <div class="modal-body">
                <div class="mb-2"><label class="form-label">Customer Name</label><input name="customer_name" class="form-control"></div>
                <div class="mb-2"><label class="form-label">Phone</label><input name="customer_phone" class="form-control"></div>
                <div class="mb-2">
                    <label class="form-label">Category</label>
                    <select name="category" class="form-select">
                        <option value="food_quality">Food Quality</option>
                        <option value="service">Service</option>
                        <option value="wait_time">Wait Time</option>
                        <option value="billing">Billing</option>
                        <option value="cleanliness">Cleanliness</option>
                        <option value="other">Other</option>
                    </select>
                </div>
                <div class="mb-2"><label class="form-label">Description</label><textarea name="description" class="form-control" required></textarea></div>
            </div>
            <div class="modal-footer"><button class="btn btn-dark">Save</button></div>
        </form>
    </div></div>
</div>
@endsection