@extends('layouts.admin')

@section('title', 'Edit Testimonial')

@section('content')
<div class="admin-page-header">
    <div>
        <h1 class="admin-page-title">Edit Testimonial</h1>
        <p class="admin-page-subtitle">Update customer testimonial details</p>
    </div>
    <a href="{{ route('admin.testimonials.index') }}" class="admin-btn admin-btn-secondary">
        <i class="fas fa-arrow-left mr-2"></i>Back to List
    </a>
</div>

<div class="admin-card" style="max-width: 800px; margin: 0 auto;">
    <form action="{{ route('admin.testimonials.update', $testimonial->id) }}" method="POST" enctype="multipart/form-data">
        @csrf
        @method('PUT')

        <div class="admin-form-group">
            <label for="customer_name" class="admin-form-label">Customer Name <span class="required">*</span></label>
            <input type="text" name="customer_name" id="customer_name" required
                value="{{ old('customer_name', $testimonial->customer_name) }}"
                class="admin-form-input @error('customer_name') error @enderror"
                placeholder="e.g., Michael Johnson">
            @error('customer_name')
                <div class="admin-form-error">{{ $message }}</div>
            @enderror
        </div>

        <div class="admin-form-group">
            <label for="customer_role" class="admin-form-label">Customer Role/Title</label>
            <input type="text" name="customer_role" id="customer_role"
                value="{{ old('customer_role', $testimonial->customer_role) }}"
                class="admin-form-input @error('customer_role') error @enderror"
                placeholder="e.g., Adventure Climber, Travel Blogger">
            @error('customer_role')
                <div class="admin-form-error">{{ $message }}</div>
            @enderror
        </div>

        <div class="admin-form-group">
            <label for="testimonial_content" class="admin-form-label">Testimonial Content <span class="required">*</span></label>
            <textarea name="testimonial_content" id="testimonial_content" rows="5" required
                class="admin-form-input admin-form-textarea @error('testimonial_content') error @enderror"
                placeholder="Enter the customer's testimonial...">{{ old('testimonial_content', $testimonial->testimonial_content) }}</textarea>
            @error('testimonial_content')
                <div class="admin-form-error">{{ $message }}</div>
            @enderror
        </div>

        <div class="admin-form-group">
            <label for="customer_image" class="admin-form-label">Customer Photo</label>
            <div style="display: flex; gap: 2rem; align-items: flex-start;">
                @if($testimonial->customer_image)
                    <div style="flex-shrink: 0;">
                        <p style="font-size: 11px; color: #6b7280; margin-bottom: 5px;">Current Image:</p>
                        <img src="{{ \App\Models\Testimonial::resolveImageUrl($testimonial->customer_image) }}" alt="{{ $testimonial->customer_name }}" style="width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 3px solid #e5e7eb;">
                    </div>
                @endif
                <div style="flex: 1;">
                    <input type="file" name="customer_image" id="customer_image" accept="image/*"
                        class="admin-form-input @error('customer_image') error @enderror">
                    <p style="font-size: 12px; color: #6b7280; margin-top: 5px;">
                        <i class="fas fa-info-circle"></i> Leave empty to keep current image. Recommended: Square, max 2MB.
                    </p>
                </div>
                <div id="imagePreview" style="display: none; flex-shrink: 0;">
                    <p style="font-size: 11px; color: #6b7280; margin-bottom: 5px;">New Preview:</p>
                    <img id="previewImg" src="" alt="Preview" style="width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 3px solid var(--admin-primary);">
                </div>
            </div>
            @error('customer_image')
                <div class="admin-form-error">{{ $message }}</div>
            @enderror
        </div>

        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;">
            <div class="admin-form-group">
                <label for="rating" class="admin-form-label">Rating (Stars) <span class="required">*</span></label>
                <select name="rating" id="rating" required
                    class="admin-form-input @error('rating') error @enderror">
                    <option value="5" {{ old('rating', $testimonial->rating) == 5 ? 'selected' : '' }}>5 Stars</option>
                    <option value="4" {{ old('rating', $testimonial->rating) == 4 ? 'selected' : '' }}>4 Stars</option>
                    <option value="3" {{ old('rating', $testimonial->rating) == 3 ? 'selected' : '' }}>3 Stars</option>
                    <option value="2" {{ old('rating', $testimonial->rating) == 2 ? 'selected' : '' }}>2 Stars</option>
                    <option value="1" {{ old('rating', $testimonial->rating) == 1 ? 'selected' : '' }}>1 Star</option>
                </select>
                @error('rating')
                    <div class="admin-form-error">{{ $message }}</div>
                @enderror
            </div>

            <div class="admin-form-group">
                <label for="display_order" class="admin-form-label">Display Order</label>
                <input type="number" name="display_order" id="display_order"
                    value="{{ old('display_order', $testimonial->display_order) }}"
                    class="admin-form-input @error('display_order') error @enderror"
                    placeholder="0">
                <p style="font-size: 11px; color: #6b7280; margin-top: 5px;">Lower numbers appear first.</p>
                @error('display_order')
                    <div class="admin-form-error">{{ $message }}</div>
                @enderror
            </div>
        </div>

        <div class="admin-form-group" style="background: #f9fafb; padding: 1rem; border-radius: 8px;">
            <label class="admin-amenity-checkbox">
                <input type="checkbox" name="is_active" value="1" {{ old('is_active', $testimonial->is_active) ? 'checked' : '' }}>
                <span class="admin-amenity-icon" style="background: var(--admin-success); color: white;"><i class="fas fa-check"></i></span>
                <span class="admin-amenity-label">Active (Display on welcome page)</span>
            </label>
            <p style="font-size: 11px; color: #6b7280; margin-top: 5px; margin-left: 36px;">
                <i class="fas fa-info-circle"></i> Note: Maximum 3 active testimonials allowed at once.
            </p>
        </div>

        <div class="flex justify-end space-x-4 mt-8 pt-6 border-t border-gray-100">
            <a href="{{ route('admin.testimonials.index') }}" class="admin-btn admin-btn-secondary">
                Cancel
            </a>
            <button type="submit" class="admin-btn admin-btn-primary">
                <i class="fas fa-save mr-2"></i>Update Testimonial
            </button>
        </div>
    </form>
</div>

<script>
    // Image preview
    document.getElementById('customer_image').addEventListener('change', function(e) {
        const file = e.target.files[0];
        const previewContainer = document.getElementById('imagePreview');
        const previewImg = document.getElementById('previewImg');
        
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                previewImg.src = e.target.result;
                previewContainer.style.display = 'block';
            }
            reader.readAsDataURL(file);
        } else {
            previewContainer.style.display = 'none';
        }
    });
</script>
@endsection