@extends('admin.layout')
@section('title','Testimonials')
@section('page-title','Student Testimonials')

@section('content')
<div style="display:grid;grid-template-columns:1fr 380px;gap:20px;align-items:start;">

    <!-- List -->
    <div class="card">
        <div class="card-header">
            <h3><i class="fas fa-quote-left" style="color:var(--red);margin-right:8px;"></i>All Testimonials ({{ $testimonials->count() }})</h3>
        </div>
        @forelse($testimonials as $t)
        <div style="padding:18px;border-bottom:1px solid #f1f5f9;">
            <form method="POST" action="{{ route('admin.testimonials.update', $t) }}" enctype="multipart/form-data">
                @csrf @method('PUT')
                <div style="display:flex;gap:14px;align-items:start;">
                    <div style="flex-shrink:0;text-align:center;">
                        @if($t->photo)
                        <img src="{{ asset('uploads/testimonials/'.$t->photo) }}" style="width:56px;height:56px;border-radius:50%;object-fit:cover;">
                        @else
                        <div style="width:56px;height:56px;border-radius:50%;background:var(--red);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;color:white;">{{ substr($t->name,0,1) }}</div>
                        @endif
                        <input type="file" name="photo" accept="image/*" style="font-size:9px;width:56px;margin-top:4px;">
                    </div>
                    <div style="flex:1;">
                        <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px;">
                            <input type="text" name="name" value="{{ $t->name }}" placeholder="Student Name" style="padding:7px 10px;border:1.5px solid #e2e8f0;border-radius:6px;font-size:13px;font-weight:600;">
                            <input type="text" name="designation" value="{{ $t->designation }}" placeholder="Designation" style="padding:7px 10px;border:1.5px solid #e2e8f0;border-radius:6px;font-size:12px;">
                        </div>
                        <div style="display:grid;grid-template-columns:1fr 80px 60px;gap:8px;margin-bottom:8px;">
                            <input type="text" name="course" value="{{ $t->course }}" placeholder="Course (N5, N4...)" style="padding:7px 10px;border:1.5px solid #e2e8f0;border-radius:6px;font-size:12px;">
                            <select name="rating" style="padding:7px;border:1.5px solid #e2e8f0;border-radius:6px;font-size:12px;">
                                @for($i=5;$i>=1;$i--)<option value="{{ $i }}" {{ $t->rating==$i?'selected':'' }}>{{ $i }}★</option>@endfor
                            </select>
                            <select name="sort_order" style="padding:7px;border:1.5px solid #e2e8f0;border-radius:6px;font-size:12px;">
                                @for($i=1;$i<=20;$i++)<option value="{{ $i }}" {{ $t->sort_order==$i?'selected':'' }}>#{{ $i }}</option>@endfor
                            </select>
                        </div>
                        <textarea name="content" rows="2" style="width:100%;padding:7px 10px;border:1.5px solid #e2e8f0;border-radius:6px;font-size:12px;resize:vertical;">{{ $t->content }}</textarea>
                        <div style="display:flex;gap:8px;margin-top:8px;align-items:center;">
                            <label style="display:flex;align-items:center;gap:5px;font-size:12px;">
                                <input type="checkbox" name="is_active" value="1" {{ $t->is_active?'checked':'' }}> Active
                            </label>
                            <button type="submit" class="btn btn-primary btn-sm" style="margin-left:auto;"><i class="fas fa-save"></i> Save</button>
                            <form method="POST" action="{{ route('admin.testimonials.destroy', $t) }}" onsubmit="return confirm('Delete?')" style="margin:0;">
                                @csrf @method('DELETE')
                                <button type="submit" class="btn btn-sm" style="background:#fef2f2;color:#dc2626;border:none;"><i class="fas fa-trash"></i></button>
                            </form>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        @empty
        <div style="padding:60px;text-align:center;color:#94a3b8;"><i class="fas fa-quote-right" style="font-size:48px;opacity:0.2;display:block;margin-bottom:14px;"></i>No testimonials yet.</div>
        @endforelse
    </div>

    <!-- Add form -->
    <div class="card">
        <div class="card-header"><h3><i class="fas fa-plus" style="color:var(--red);margin-right:8px;"></i>Add Testimonial</h3></div>
        <div class="card-body">
            <form method="POST" action="{{ route('admin.testimonials.store') }}" enctype="multipart/form-data">
                @csrf
                <div class="form-group" style="margin-bottom:12px;">
                    <label>Student Name *</label>
                    <input type="text" name="name" required placeholder="Rahul Sharma" style="width:100%;padding:9px 12px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:13px;">
                </div>
                <div class="form-group" style="margin-bottom:12px;">
                    <label>Designation / Role</label>
                    <input type="text" name="designation" placeholder="N2 Passer, Now in Japan" style="width:100%;padding:9px 12px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:13px;">
                </div>
                <div class="form-group" style="margin-bottom:12px;">
                    <label>Course Completed</label>
                    <input type="text" name="course" placeholder="N4 Japanese" style="width:100%;padding:9px 12px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:13px;">
                </div>
                <div class="form-group" style="margin-bottom:12px;">
                    <label>Rating</label>
                    <select name="rating" style="width:100%;padding:9px 12px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:13px;">
                        <option value="5">5 ★★★★★</option>
                        <option value="4">4 ★★★★</option>
                        <option value="3">3 ★★★</option>
                    </select>
                </div>
                <div class="form-group" style="margin-bottom:12px;">
                    <label>Testimonial Text *</label>
                    <textarea name="content" required rows="4" placeholder="What the student said..." style="width:100%;padding:9px 12px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:13px;resize:vertical;"></textarea>
                </div>
                <div class="form-group" style="margin-bottom:16px;">
                    <label>Student Photo</label>
                    <input type="file" name="photo" accept="image/*" style="font-size:13px;">
                    <div style="font-size:11px;color:#94a3b8;margin-top:4px;">JPG/PNG, max 2MB. Square photo recommended.</div>
                </div>
                <button type="submit" class="btn btn-primary" style="width:100%;"><i class="fas fa-plus"></i> Add Testimonial</button>
            </form>
        </div>
    </div>
</div>
@endsection