@extends('admin::layouts.admin')

@section('title', isset($ulasan) ? 'Edit Ulasan' : 'Tambah Ulasan')

@section('content')
<div class="ulasan-form-page">
    {{-- Page Header --}}
    <div class="page-header">
        <a href="{{ route('admin.settings.ulasan') }}" class="btn-back">
            <i class="fas fa-arrow-left"></i>
            Kembali
        </a>
        <h1 class="page-title">{{ isset($ulasan) ? 'Edit Ulasan' : 'Tambah Ulasan' }}</h1>
    </div>

    {{-- Form Card --}}
    <div class="form-card">
        {{-- Card Header with Gradient --}}
        <div class="form-card-header">
            <div class="header-icon">
                <i class="fas fa-comments"></i>
            </div>
            <span class="header-title">{{ isset($ulasan) ? 'Form Edit Ulasan' : 'Form Tambah Ulasan' }}</span>
        </div>

        {{-- Card Body --}}
        <div class="form-card-body">
            <form action="{{ isset($ulasan) ? route('admin.settings.ulasan.update', $ulasan->id) : route('admin.settings.ulasan.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                @if(isset($ulasan))
                    @method('PUT')
                @endif

                {{-- Photo Upload --}}
                <div class="form-group">
                    <label class="form-label">Foto Profil <span class="required">*</span></label>
                    <div class="photo-upload-section">
                        <div class="photo-preview" id="photoPreview">
                            @if(isset($ulasan) && $ulasan->photo)
                                <img src="{{ asset('storage/' . $ulasan->photo) }}" alt="User Photo" id="previewImage">
                            @else
                                <i class="fas fa-user"></i>
                            @endif
                        </div>
                        <div class="photo-upload-actions">
                            <button type="button" class="btn-upload" onclick="document.getElementById('photoInput').click()">
                                <i class="fas fa-camera"></i>
                                Pilih Foto
                            </button>
                            <p class="upload-hint">Format: JPG, PNG (Maks. 1MB)</p>
                            <p class="upload-hint">Ukuran: 200 x 200 px</p>
                        </div>
                        <input type="file" name="photo" id="photoInput" accept="image/*" hidden>
                    </div>
                </div>

                {{-- Name --}}
                <div class="form-group">
                    <label class="form-label" for="name">Nama <span class="required">*</span></label>
                    <input type="text" name="name" id="name" class="form-input" placeholder="Masukkan nama pengulas" value="{{ $ulasan->name ?? old('name') }}" required>
                </div>

                {{-- Position/Title --}}
                <div class="form-group">
                    <label class="form-label" for="position">Jabatan / Profesi</label>
                    <input type="text" name="position" id="position" class="form-input" placeholder="Contoh: CEO, Investor, dll" value="{{ $ulasan->position ?? old('position') }}">
                </div>

                {{-- Review Text --}}
                <div class="form-group">
                    <label class="form-label" for="review">Ulasan <span class="required">*</span></label>
                    <textarea name="review" id="review" class="form-textarea" rows="5" placeholder="Masukkan ulasan / testimoni" required>{{ $ulasan->review ?? old('review') }}</textarea>
                    <small class="form-hint">Minimal 50 karakter, maksimal 500 karakter</small>
                </div>

                {{-- Rating --}}
                <div class="form-group">
                    <label class="form-label">Rating</label>
                    <div class="rating-input">
                        @for($i = 5; $i >= 1; $i--)
                            <input type="radio" name="rating" id="star{{ $i }}" value="{{ $i }}"
                                {{ (isset($ulasan) && $ulasan->rating == $i) ? 'checked' : '' }}
                                {{ (!isset($ulasan) && $i == 5) ? 'checked' : '' }}>
                            <label for="star{{ $i }}" title="{{ $i }} stars">
                                <i class="fas fa-star"></i>
                            </label>
                        @endfor
                    </div>
                </div>

                {{-- Order & Status --}}
                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label" for="order">Urutan</label>
                        <input type="number" name="order" id="order" class="form-input" placeholder="1" value="{{ $ulasan->order ?? old('order', 1) }}" min="1">
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="status">Status</label>
                        <select name="status" id="status" class="form-select">
                            <option value="active" {{ (isset($ulasan) && $ulasan->status == 'active') ? 'selected' : '' }}>Aktif</option>
                            <option value="inactive" {{ (isset($ulasan) && $ulasan->status == 'inactive') ? 'selected' : '' }}>Tidak Aktif</option>
                        </select>
                    </div>
                </div>

                {{-- Form Actions --}}
                <div class="form-actions">
                    <a href="{{ route('admin.settings.ulasan') }}" class="btn-cancel">Batal</a>
                    <button type="submit" class="btn-submit">
                        <i class="fas fa-save"></i>
                        {{ isset($ulasan) ? 'Update' : 'Simpan' }}
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<style>
.ulasan-form-page {
    max-width: 1400px;
}

/* Page Header */
.page-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
}

.btn-back {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(139, 92, 246, 0.2);
    border-radius: 10px;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.btn-back:hover {
    background: rgba(139, 92, 246, 0.3);
    transform: translateX(-3px);
}

.page-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--purple-primary);
}

/* Form Card */
.form-card {
    background: rgba(26, 23, 48, 0.6);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(139, 92, 246, 0.2);
}

.form-card-header {
    background: linear-gradient(135deg, var(--purple-primary) 0%, var(--purple-dark) 100%);
    padding: 16px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-icon {
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.header-title {
    font-size: 1rem;
    font-weight: 600;
    color: white;
}

.form-card-body {
    padding: 24px;
}

/* Form Elements */
.form-group {
    margin-bottom: 20px;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.form-label {
    display: block;
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.form-label .required {
    color: #ef4444;
}

.form-hint {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 6px;
}

.form-input, .form-textarea, .form-select {
    width: 100%;
    padding: 12px 16px;
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

.form-input:focus, .form-textarea:focus, .form-select:focus {
    outline: none;
    border-color: var(--purple-primary);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}

.form-input::placeholder, .form-textarea::placeholder {
    color: var(--text-muted);
}

.form-select {
    cursor: pointer;
}

.form-select option {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

/* Photo Upload */
.photo-upload-section {
    display: flex;
    align-items: center;
    gap: 24px;
}

.photo-preview {
    width: 100px;
    height: 100px;
    background: rgba(139, 92, 246, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 3px solid rgba(139, 92, 246, 0.3);
}

.photo-preview i {
    font-size: 40px;
    color: var(--text-muted);
}

.photo-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-upload-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.btn-upload {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, var(--purple-primary) 0%, var(--purple-dark) 100%);
    border: none;
    border-radius: 8px;
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-upload:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.upload-hint {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0;
}

/* Rating Input */
.rating-input {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 4px;
}

.rating-input input {
    display: none;
}

.rating-input label {
    cursor: pointer;
    font-size: 1.5rem;
    color: rgba(139, 92, 246, 0.3);
    transition: all 0.2s ease;
}

.rating-input label:hover,
.rating-input label:hover ~ label,
.rating-input input:checked ~ label {
    color: #fbbf24;
}

/* Form Actions */
.form-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid rgba(139, 92, 246, 0.2);
}

.btn-cancel {
    padding: 12px 24px;
    background: rgba(139, 92, 246, 0.2);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 10px;
    color: var(--text-primary);
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-cancel:hover {
    background: rgba(139, 92, 246, 0.3);
}

.btn-submit {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, var(--purple-primary) 0%, var(--purple-dark) 100%);
    border: none;
    border-radius: 10px;
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
}

/* Responsive */
@media (max-width: 768px) {
    .page-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .photo-upload-section {
        flex-direction: column;
        align-items: flex-start;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .form-actions {
        flex-direction: column;
    }

    .btn-cancel, .btn-submit {
        width: 100%;
        justify-content: center;
    }
}
</style>

<script>
// Photo upload preview
const photoInput = document.getElementById('photoInput');
const photoPreview = document.getElementById('photoPreview');

photoInput.addEventListener('change', function(e) {
    if (e.target.files.length > 0) {
        const reader = new FileReader();
        reader.onload = function(event) {
            photoPreview.innerHTML = `<img src="${event.target.result}" alt="Preview" id="previewImage">`;
        };
        reader.readAsDataURL(e.target.files[0]);
    }
});
</script>
@endsection