@extends('layouts.admin')

@section('title', __('Add Testimonial'))

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="h3 mb-0 text-gray-800">{{ __('Add Testimonial') }}</h1>
                    <p class="text-muted">{{ __('Create a new client testimonial') }}</p>
                </div>
                <div>
                    <a href="{{ route('admin.testimonials.dashboard', ['locale' => app()->getLocale()]) }}"
                       class="btn btn-outline-secondary">
                        <i class="fas fa-arrow-left"></i> {{ __('Back to Dashboard') }}
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Form Card -->
    <div class="row">
        <div class="col-12">
            <form action="{{ route('admin.testimonials.store', ['locale' => app()->getLocale()]) }}"
                  method="POST" enctype="multipart/form-data" id="testimonialForm">
                @csrf

                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">{{ __('Testimonial Information') }}</h6>
                    </div>
                    <div class="card-body">
                        <!-- Client Information -->
                        <h5 class="mb-3">{{ __('Client Information') }}</h5>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="client_name">{{ __('Client Name') }} <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control @error('client_name') is-invalid @enderror"
                                           id="client_name" name="client_name" value="{{ old('client_name') }}"
                                           placeholder="{{ __('Enter client full name') }}" required>
                                    @error('client_name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="client_position">{{ __('Position/Title') }}</label>
                                    <input type="text" class="form-control @error('client_position') is-invalid @enderror"
                                           id="client_position" name="client_position" value="{{ old('client_position') }}"
                                           placeholder="{{ __('e.g., CEO, Marketing Manager') }}">
                                    @error('client_position')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="client_company">{{ __('Company') }}</label>
                                    <input type="text" class="form-control @error('client_company') is-invalid @enderror"
                                           id="client_company" name="client_company" value="{{ old('client_company') }}"
                                           placeholder="{{ __('Company name') }}">
                                    @error('client_company')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="client_email">{{ __('Email') }}</label>
                                    <input type="email" class="form-control @error('client_email') is-invalid @enderror"
                                           id="client_email" name="client_email" value="{{ old('client_email') }}"
                                           placeholder="{{ __('client@example.com') }}">
                                    @error('client_email')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="client_phone">{{ __('Phone') }}</label>
                                    <input type="text" class="form-control @error('client_phone') is-invalid @enderror"
                                           id="client_phone" name="client_phone" value="{{ old('client_phone') }}"
                                           placeholder="{{ __('+1 (555) 123-4567') }}">
                                    @error('client_phone')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="client_website">{{ __('Website') }}</label>
                                    <input type="url" class="form-control @error('client_website') is-invalid @enderror"
                                           id="client_website" name="client_website" value="{{ old('client_website') }}"
                                           placeholder="{{ __('https://example.com') }}">
                                    @error('client_website')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="client_avatar">{{ __('Client Avatar') }}</label>
                            <div class="custom-file">
                                <input type="file" class="custom-file-input @error('client_avatar') is-invalid @enderror"
                                       id="client_avatar" name="client_avatar" accept="image/*">
                                <label class="custom-file-label" for="client_avatar">{{ __('Choose file...') }}</label>
                            </div>
                            <small class="form-text text-muted">{{ __('Maximum file size: 2MB. Supported formats: JPEG, PNG, JPG, GIF') }}</small>
                            @error('client_avatar')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Content -->
                        <h5 class="mb-3 mt-4">{{ __('Testimonial Content') }}</h5>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="content_en">{{ __('Content (English)') }} <span class="text-danger">*</span></label>
                                    <textarea class="form-control @error('content_en') is-invalid @enderror"
                                              id="content_en" name="content_en" rows="6"
                                              placeholder="{{ __('Enter the testimonial content in English...') }}" required>{{ old('content_en') }}</textarea>
                                    <small class="form-text text-muted">{{ __('Minimum 10 characters, maximum 2000 characters') }}</small>
                                    @error('content_en')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="content_ar">{{ __('Content (Arabic)') }}</label>
                                    <textarea class="form-control @error('content_ar') is-invalid @enderror"
                                              id="content_ar" name="content_ar" rows="6"
                                              placeholder="{{ __('Enter the testimonial content in Arabic...') }}" dir="rtl">{{ old('content_ar') }}</textarea>
                                    <small class="form-text text-muted">{{ __('Minimum 10 characters, maximum 2000 characters (optional)') }}</small>
                                    @error('content_ar')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Rating and Association -->
                        <h5 class="mb-3 mt-4">{{ __('Rating & Association') }}</h5>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="rating">{{ __('Rating') }} <span class="text-danger">*</span></label>
                                    <select class="form-control @error('rating') is-invalid @enderror"
                                            id="rating" name="rating" required>
                                        <option value="">{{ __('Select rating') }}</option>
                                        @for($i = 5; $i >= 1; $i--)
                                            <option value="{{ $i }}" {{ old('rating') == $i ? 'selected' : '' }}>
                                                {{ $i }} {{ Str::plural('Star', $i) }}
                                            </option>
                                        @endfor
                                    </select>
                                    @error('rating')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="portfolio_id">{{ __('Associated Project') }}</label>
                                    <select class="form-control @error('portfolio_id') is-invalid @enderror"
                                            id="portfolio_id" name="portfolio_id">
                                        <option value="">{{ __('Select project (optional)') }}</option>
                                        @foreach($portfolios as $portfolio)
                                            <option value="{{ $portfolio->id }}" {{ old('portfolio_id') == $portfolio->id ? 'selected' : '' }}>
                                                {{ $portfolio->title }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('portfolio_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Status and Display -->
                        <h5 class="mb-3 mt-4">{{ __('Status & Display') }}</h5>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="is_active">{{ __('Status') }}</label>
                                    <div class="custom-control custom-switch">
                                        <input type="hidden" name="is_active" value="0">
                                        <input type="checkbox" class="custom-control-input"
                                               id="is_active" name="is_active" value="1"
                                               {{ old('is_active', true) ? 'checked' : '' }}>
                                        <label class="custom-control-label" for="is_active">
                                            {{ __('Active (visible on website)') }}
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="is_featured">{{ __('Featured') }}</label>
                                    <div class="custom-control custom-switch">
                                        <input type="hidden" name="is_featured" value="0">
                                        <input type="checkbox" class="custom-control-input"
                                               id="is_featured" name="is_featured" value="1"
                                               {{ old('is_featured', false) ? 'checked' : '' }}>
                                        <label class="custom-control-label" for="is_featured">
                                            {{ __('Featured testimonial') }}
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="display_order">{{ __('Display Order') }}</label>
                                    <input type="number" class="form-control @error('display_order') is-invalid @enderror"
                                           id="display_order" name="display_order" value="{{ old('display_order', 0) }}"
                                           min="0" placeholder="0">
                                    <small class="form-text text-muted">{{ __('Lower numbers appear first') }}</small>
                                    @error('display_order')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="published_at">{{ __('Publish Date') }}</label>
                                    <input type="datetime-local" class="form-control @error('published_at') is-invalid @enderror"
                                           id="published_at" name="published_at" value="{{ old('published_at') }}">
                                    <small class="form-text text-muted">{{ __('Leave empty to publish immediately when active') }}</small>
                                    @error('published_at')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Submit Buttons -->
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex justify-content-between">
                            <a href="{{ route('admin.testimonials.dashboard', ['locale' => app()->getLocale()]) }}"
                               class="btn btn-secondary">
                                <i class="fas fa-times"></i> {{ __('Cancel') }}
                            </a>
                            <div>
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-save"></i> {{ __('Create Testimonial') }}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

@push('styles')
<style>
.custom-file-label::after {
    content: "{{ __('Browse') }}";
}

.rating-stars {
    color: #ffc107;
    font-size: 18px;
}
</style>
@endpush

@push('scripts')
<script>
// Update file input label
$('#client_avatar').on('change', function() {
    var fileName = $(this).val().split('\\').pop();
    $(this).next('.custom-file-label').html(fileName || '{{ __("Choose file...") }}');
});

// Form validation
$('#testimonialForm').on('submit', function(e) {
    // Custom validation can be added here
    console.log('Form submitted');
});
</script>
@endpush
@endsection