@extends('admin.layouts.app')
@section('title', 'Testimonials')
@section('heading', 'Customer Testimonials')

@section('content')
<div class="page-actions">
    <p class="muted" style="font-size:.9rem;">Manage customer reviews displayed on the homepage.</p>
</div>

{{-- Add form --}}
<div class="card">
    <div class="section-header">
        <i class="fa-solid fa-plus"></i>
        <div><h3>Add Testimonial</h3><p>Add a new customer review</p></div>
    </div>
    <form method="POST" action="{{ route('admin.testimonials.store') }}" enctype="multipart/form-data">
        @csrf
        <div class="form-row">
            <div class="form-field">
                <label>Customer Name <span class="req">*</span></label>
                <input type="text" name="customer_name" required value="{{ old('customer_name') }}" placeholder="e.g. Ahmed K.">
            </div>
            <div class="form-field">
                <label>Role / Location</label>
                <input type="text" name="customer_role" value="{{ old('customer_role') }}" placeholder="e.g. DHA Lahore">
            </div>
        </div>
        <div class="form-field" style="margin-top:.75rem;">
            <label>Review <span class="req">*</span></label>
            <textarea name="review" rows="3" required placeholder="Customer review text...">{{ old('review') }}</textarea>
        </div>
        <div class="form-row" style="margin-top:.75rem;">
            <div class="form-field">
                <label>Rating <span class="req">*</span></label>
                <select name="rating" required>
                    @for($i=5; $i>=1; $i--)
                        <option value="{{ $i }}" {{ old('rating', 5) == $i ? 'selected' : '' }}>{{ $i }} Stars</option>
                    @endfor
                </select>
            </div>
            <div class="form-field">
                <label>Sort Order</label>
                <input type="number" name="sort_order" value="{{ old('sort_order', 0) }}" min="0">
            </div>
            <div class="form-field">
                <label>Photo (optional)</label>
                <input type="file" name="image_file" accept="image/*">
            </div>
            <div class="form-field" style="justify-content:flex-end; padding-top:.25rem;">
                <label>Active</label>
                <label class="toggle-switch" style="margin-top:.5rem;">
                    <input type="checkbox" name="active" value="1" checked>
                    <span class="toggle-track"></span>
                    <span style="margin-left:.6rem; font-size:.875rem; color:#374151;">Visible on site</span>
                </label>
            </div>
        </div>
        <div style="margin-top:1rem;">
            <button class="adm-btn adm-btn-primary"><i class="fa-solid fa-plus"></i> Add Testimonial</button>
        </div>
    </form>
</div>

@if($items->isEmpty())
    <div class="empty-state">
        <i class="fa-solid fa-star"></i>
        <h3>No testimonials yet</h3>
        <p>Add your first customer review above.</p>
    </div>
@else
    <div class="card" style="padding:0; overflow:hidden;">
        <table class="data-table">
            <thead>
                <tr>
                    <th>Photo</th>
                    <th>Customer</th>
                    <th>Review</th>
                    <th>Rating</th>
                    <th style="width:70px;">Order</th>
                    <th>Status</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach($items as $t)
                <tr>
                    <td>
                        @if($t->image)
                            <img src="{{ asset($t->image) }}" class="thumb" style="border-radius:50%;">
                        @else
                            <div style="width:48px; height:48px; background:#f1f5f9; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; color:#94a3b8; font-size:1.1rem;">{{ strtoupper(substr($t->customer_name,0,1)) }}</div>
                        @endif
                    </td>
                    <td>
                        <strong>{{ $t->customer_name }}</strong>
                        @if($t->customer_role)<br><small class="muted">{{ $t->customer_role }}</small>@endif
                    </td>
                    <td style="max-width:280px;">
                        <span style="font-size:.85rem; color:#374151; line-height:1.5;">"{{ Str::limit($t->review, 100) }}"</span>
                    </td>
                    <td>
                        <span class="star-row">
                            @for($i=1; $i<=5; $i++)<i class="fa-solid fa-star {{ $i <= $t->rating ? 'star-on' : 'star-off' }}"></i>@endfor
                        </span>
                    </td>
                    <td><span class="chip">{{ $t->sort_order }}</span></td>
                    <td>
                        @if($t->active)
                            <span class="badge badge-delivered">Active</span>
                        @else
                            <span class="badge badge-cancelled">Hidden</span>
                        @endif
                    </td>
                    <td>
                        <div class="actions-row">
                            <button class="adm-btn adm-btn-warn" onclick="toggleEditTestimonial({{ $t->id }})"><i class="fa-solid fa-pen"></i></button>
                            <form method="POST" action="{{ route('admin.testimonials.destroy', $t) }}" onsubmit="return confirm('Delete this testimonial?');" style="display:inline;">
                                @csrf @method('DELETE')
                                <button class="adm-btn adm-btn-danger"><i class="fa-solid fa-trash"></i></button>
                            </form>
                        </div>
                    </td>
                </tr>
                <tr id="edit-t-{{ $t->id }}" style="display:none; background:#f8fafc;">
                    <td colspan="7" style="padding:1.25rem;">
                        <form method="POST" action="{{ route('admin.testimonials.update', $t) }}" enctype="multipart/form-data">
                            @csrf @method('PUT')
                            <div class="form-row">
                                <div class="form-field">
                                    <label>Customer Name <span class="req">*</span></label>
                                    <input type="text" name="customer_name" required value="{{ $t->customer_name }}">
                                </div>
                                <div class="form-field">
                                    <label>Role / Location</label>
                                    <input type="text" name="customer_role" value="{{ $t->customer_role }}">
                                </div>
                            </div>
                            <div class="form-field" style="margin-top:.75rem;">
                                <label>Review <span class="req">*</span></label>
                                <textarea name="review" rows="3" required>{{ $t->review }}</textarea>
                            </div>
                            <div class="form-row" style="margin-top:.75rem;">
                                <div class="form-field">
                                    <label>Rating <span class="req">*</span></label>
                                    <select name="rating" required>
                                        @for($i=5; $i>=1; $i--)
                                            <option value="{{ $i }}" {{ $t->rating == $i ? 'selected' : '' }}>{{ $i }} Stars</option>
                                        @endfor
                                    </select>
                                </div>
                                <div class="form-field">
                                    <label>Sort Order</label>
                                    <input type="number" name="sort_order" value="{{ $t->sort_order }}" min="0">
                                </div>
                                <div class="form-field">
                                    <label>New Photo</label>
                                    <input type="file" name="image_file" accept="image/*">
                                </div>
                                <div class="form-field" style="padding-top:.25rem;">
                                    <label>Active</label>
                                    <label class="toggle-switch" style="margin-top:.5rem;">
                                        <input type="checkbox" name="active" value="1" {{ $t->active ? 'checked' : '' }}>
                                        <span class="toggle-track"></span>
                                        <span style="margin-left:.6rem; font-size:.875rem; color:#374151;">Visible</span>
                                    </label>
                                </div>
                            </div>
                            <div style="display:flex; gap:.5rem; margin-top:.85rem;">
                                <button class="adm-btn adm-btn-primary"><i class="fa-solid fa-check"></i> Save Changes</button>
                                <button type="button" class="adm-btn adm-btn-ghost" onclick="toggleEditTestimonial({{ $t->id }})"><i class="fa-solid fa-xmark"></i> Cancel</button>
                            </div>
                        </form>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
@endif

@push('scripts')
<script>
function toggleEditTestimonial(id) {
    var row = document.getElementById('edit-t-' + id);
    var allRows = document.querySelectorAll('[id^="edit-t-"]');
    allRows.forEach(function(r) { if (r !== row) r.style.display = 'none'; });
    row.style.display = row.style.display === 'none' ? 'table-row' : 'none';
}
</script>
@endpush
@endsection