@props(['testimonial' => null])

<div class="mb-3">
    <label for="client_name" class="form-label">Client Name</label>
    <input type="text" name="client_name" id="client_name" class="form-control @error('client_name') is-invalid @enderror" value="{{ old('client_name', $testimonial->client_name ?? '') }}" required>
    @error('client_name')<div class="invalid-feedback">{{ $message }}</div>@enderror
</div>

<div class="mb-3">
    <label for="client_photo" class="form-label">Client Photo <span class="text-muted">(optional)</span></label>
    {{-- Null-safe: this component also renders on the "create" screen, where
         $testimonial is null. `$testimonial->photoUrl() ?? null` does not help
         there — ?? only catches a null *result*, not a method call on null. --}}
    @if($testimonial?->photoUrl())
        <div class="mb-2"><img src="{{ $testimonial->photoUrl() }}" alt="" class="rounded-circle" style="width: 64px; height: 64px; object-fit: cover;"></div>
    @endif
    <input type="file" name="client_photo" id="client_photo" class="form-control" accept="image/jpeg,image/png,image/webp">
</div>

<div class="row">
    <div class="col-md-6 mb-3">
        <label for="company" class="form-label">Company <span class="text-muted">(optional)</span></label>
        <input type="text" name="company" id="company" class="form-control" value="{{ old('company', $testimonial->company ?? '') }}">
    </div>
    <div class="col-md-6 mb-3">
        <label for="country" class="form-label">Country <span class="text-muted">(optional)</span></label>
        <input type="text" name="country" id="country" class="form-control" value="{{ old('country', $testimonial->country ?? '') }}">
    </div>
</div>

{{-- --- Brand Logo (shown alongside the review in the testimonial carousel) --- --}}
<div class="mb-3">
    <label class="form-label">Brand Logo <span class="text-muted">(optional)</span></label>
    <div class="d-flex align-items-center gap-3">
        <div data-company-logo-preview class="d-flex align-items-center justify-content-center flex-shrink-0" style="width: 72px; height: 72px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-soft-background); overflow: hidden;">
            @if($testimonial?->companyLogoUrl())
                <img src="{{ $testimonial->companyLogoUrl() }}" alt="" style="max-width: 100%; max-height: 100%; object-fit: contain;">
            @else
                <i class="fa-solid fa-image text-muted" aria-hidden="true"></i>
            @endif
        </div>
        <div>
            <button type="button" class="btn btn-secondary-outline btn-sm" data-bs-toggle="modal" data-bs-target="#companyLogoModal">
                {{ $testimonial?->companyLogoUrl() ? 'Change Logo' : 'Choose Logo' }}
            </button>
            @if($testimonial?->companyLogoUrl())
                <div class="form-check form-check-inline ms-1">
                    <input type="checkbox" name="remove_company_logo" id="remove_company_logo" value="1" class="form-check-input" data-remove-company-logo>
                    <label for="remove_company_logo" class="form-check-label small text-muted">Remove logo</label>
                </div>
            @endif
        </div>
    </div>
    <input type="hidden" name="company_logo_media_id" data-company-logo-media-id>
    <div class="form-text">Displayed next to this review in the testimonial carousel.</div>
</div>

{{-- Choose Logo modal: pick from the Media Library, or upload a new image --}}
<div class="modal fade" id="companyLogoModal" data-picker-url="{{ route('admin.media.picker') }}" tabindex="-1" aria-labelledby="companyLogoModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h2 class="modal-title h5" id="companyLogoModalLabel">Choose Brand Logo</h2>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <ul class="nav nav-tabs mb-3" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#companyLogoLibraryTab" type="button" role="tab">Media Library</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#companyLogoUploadTab" type="button" role="tab">Upload New</button>
                    </li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane fade show active" id="companyLogoLibraryTab" role="tabpanel">
                        <div data-logo-grid class="row row-cols-3 row-cols-md-4 g-2" style="max-height: 360px; overflow-y: auto;">
                            <div class="col-12 text-center text-muted py-4" data-logo-grid-status>Loading images…</div>
                        </div>
                        <button type="button" class="btn btn-secondary-outline btn-sm mt-3 d-none" data-logo-load-more>Load more</button>
                    </div>
                    <div class="tab-pane fade" id="companyLogoUploadTab" role="tabpanel">
                        <label for="company_logo" class="form-label">Logo File</label>
                        <input type="file" name="company_logo" id="company_logo" class="form-control" accept="image/png,image/jpeg,image/webp,image/svg+xml">
                        <div class="form-text">PNG, JPG, WebP or SVG, max 2MB. It'll also be saved to your Media Library for reuse.</div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary-gradient" data-bs-dismiss="modal">Done</button>
            </div>
        </div>
    </div>
</div>

<div class="mb-3">
    <label for="review" class="form-label">Review</label>
    <textarea name="review" id="review" class="form-control @error('review') is-invalid @enderror" rows="4" maxlength="2000" required>{{ old('review', $testimonial->review ?? '') }}</textarea>
    @error('review')<div class="invalid-feedback">{{ $message }}</div>@enderror
</div>

<div class="mb-3">
    <label for="rating" class="form-label">Rating</label>
    <select name="rating" id="rating" class="form-select">
        <option value="5" @selected(old('rating', $testimonial->rating ?? 5) == 5)>5 Stars</option>
        <option value="4" @selected(old('rating', $testimonial->rating ?? 5) == 4)>4 Stars</option>
        <option value="3" @selected(old('rating', $testimonial->rating ?? 5) == 3)>3 Stars</option>
        <option value="2" @selected(old('rating', $testimonial->rating ?? 5) == 2)>2 Stars</option>
        <option value="1" @selected(old('rating', $testimonial->rating ?? 5) == 1)>1 Star</option>
    </select>
</div>

<div class="form-check mb-2">
    <input type="checkbox" name="is_featured" id="is_featured" class="form-check-input" value="1" @checked(old('is_featured', $testimonial->is_featured ?? false))>
    <label for="is_featured" class="form-check-label">Feature this testimonial</label>
</div>

<div class="form-check mb-4">
    <input type="checkbox" name="is_visible" id="is_visible" class="form-check-input" value="1" @checked(old('is_visible', $testimonial->is_visible ?? true))>
    <label for="is_visible" class="form-check-label">Visible on the public site</label>
</div>