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

@section('title', isset($game) ? 'Edit Game' : 'Tambah Game')

@section('content')
<div class="game-form-page">
    {{-- Page Header --}}
    <div class="page-header-game">
        <h1 class="page-title-game">{{ isset($game) ? 'Edit Game' : 'Tambah Game Baru' }}</h1>
        <div class="header-actions">
            <a href="{{ route('admin.games.index') }}" class="btn-cancel">
                <i class="fas fa-times"></i>
                Batal
            </a>
            <button type="submit" form="gameForm" class="btn-save">
                <i class="fas fa-save"></i>
                Simpan
            </button>
        </div>
    </div>

    {{-- Validation Errors --}}
    @if($errors->any())
        <div class="alert alert-danger">
            <i class="fas fa-exclamation-circle"></i>
            <div>
                <strong>Terdapat kesalahan:</strong>
                <ul>
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        </div>
    @endif

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

            <div class="form-grid">
                {{-- Left Column --}}
                <div class="form-column">
                    <div class="form-section">
                        <h3 class="section-label">Informasi Game</h3>

                        {{-- Nama Game --}}
                        <div class="form-group">
                            <label class="form-label">Nama Game <span class="required">*</span></label>
                            <input type="text" name="name" class="form-input @error('name') is-invalid @enderror"
                                   placeholder="Contoh: Staking Adventure"
                                   value="{{ old('name', $game->name ?? '') }}" required>
                            @error('name')
                                <span class="error-text">{{ $message }}</span>
                            @enderror
                        </div>

                        {{-- Slug --}}
                        <div class="form-group">
                            <label class="form-label">Slug (URL)</label>
                            <input type="text" name="slug" class="form-input @error('slug') is-invalid @enderror"
                                   placeholder="Otomatis dari nama"
                                   value="{{ old('slug', $game->slug ?? '') }}">
                            <span class="form-hint">Kosongkan untuk generate otomatis dari nama</span>
                            @error('slug')
                                <span class="error-text">{{ $message }}</span>
                            @enderror
                        </div>

                        {{-- Deskripsi --}}
                        <div class="form-group">
                            <label class="form-label">Deskripsi</label>
                            <textarea name="description" class="form-textarea @error('description') is-invalid @enderror"
                                      placeholder="Deskripsi singkat tentang game..."
                                      rows="4">{{ old('description', $game->description ?? '') }}</textarea>
                            @error('description')
                                <span class="error-text">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>

                    {{-- Score Configuration --}}
                    <div class="form-section">
                        <h3 class="section-label">Konfigurasi Score</h3>

                        <div class="form-row">
                            <div class="form-group half">
                                <label class="form-label">Min Score <span class="required">*</span></label>
                                <input type="number" name="min_score" class="form-input @error('min_score') is-invalid @enderror"
                                       placeholder="0" min="0"
                                       value="{{ old('min_score', $game->min_score ?? 0) }}" required>
                                @error('min_score')
                                    <span class="error-text">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="form-group half">
                                <label class="form-label">Max Score <span class="required">*</span></label>
                                <input type="number" name="max_score" class="form-input @error('max_score') is-invalid @enderror"
                                       placeholder="100" min="1"
                                       value="{{ old('max_score', $game->max_score ?? 100) }}" required>
                                @error('max_score')
                                    <span class="error-text">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                    </div>

                    {{-- Reward Configuration --}}
                    <div class="form-section">
                        <h3 class="section-label">Konfigurasi Reward</h3>

                        <div class="form-group">
                            <label class="form-label">Point Reward <span class="required">*</span></label>
                            <div class="input-with-icon">
                                <i class="fas fa-coins"></i>
                                <input type="number" name="point_reward" class="form-input @error('point_reward') is-invalid @enderror"
                                       placeholder="1" min="0"
                                       value="{{ old('point_reward', $game->point_reward ?? 1) }}" required>
                            </div>
                            <span class="form-hint">Poin yang diberikan saat menyelesaikan game</span>
                            @error('point_reward')
                                <span class="error-text">{{ $message }}</span>
                            @enderror
                        </div>

                        <div class="form-row">
                            <div class="form-group half">
                                <label class="form-label">Daily Limit <span class="required">*</span></label>
                                <input type="number" name="daily_limit" class="form-input @error('daily_limit') is-invalid @enderror"
                                       placeholder="5" min="1"
                                       value="{{ old('daily_limit', $game->daily_limit ?? 5) }}" required>
                                <span class="form-hint">Maks main per hari</span>
                                @error('daily_limit')
                                    <span class="error-text">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="form-group half">
                                <label class="form-label">Cooldown (menit)</label>
                                <input type="number" name="cooldown_minutes" class="form-input @error('cooldown_minutes') is-invalid @enderror"
                                       placeholder="0" min="0"
                                       value="{{ old('cooldown_minutes', $game->cooldown_minutes ?? 0) }}">
                                <span class="form-hint">Jeda antar sesi</span>
                                @error('cooldown_minutes')
                                    <span class="error-text">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Right Column --}}
                <div class="form-column">
                    {{-- Thumbnail --}}
                    <div class="form-section">
                        <h3 class="section-label">Thumbnail</h3>

                        <div class="form-group">
                            <label class="form-label">Gambar Thumbnail</label>
                            <div class="upload-area thumbnail-upload" id="thumbnailArea">
                                <div class="upload-content" id="thumbnailContent" style="{{ isset($game) && $game->thumbnail ? 'display:none' : '' }}">
                                    <div class="upload-icon">
                                        <i class="fas fa-image"></i>
                                    </div>
                                    <p class="upload-text">Drag & drop atau klik untuk upload</p>
                                    <button type="button" class="btn-upload" onclick="document.getElementById('thumbnailInput').click()">
                                        Pilih Gambar
                                    </button>
                                    <span class="upload-hint">Max 2MB (JPG, PNG, WebP)</span>
                                </div>
                                <div class="preview-content" id="thumbnailPreview" style="{{ isset($game) && $game->thumbnail ? '' : 'display:none' }}">
                                    <img id="thumbnailImage" src="{{ isset($game) && $game->thumbnail ? asset('storage/' . $game->thumbnail) : '' }}" alt="Preview">
                                    <button type="button" class="btn-remove-file" onclick="removeThumbnail()">
                                        <i class="fas fa-times"></i>
                                    </button>
                                </div>
                                <input type="file" name="thumbnail" id="thumbnailInput" accept="image/*" hidden onchange="previewThumbnail(this)">
                            </div>
                            @error('thumbnail')
                                <span class="error-text">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>

                    {{-- Game ZIP File --}}
                    <div class="form-section">
                        <h3 class="section-label">File Game (ZIP)</h3>

                        <div class="form-group">
                            <label class="form-label">Upload HTML5 Game</label>
                            <div class="upload-area zip-upload" id="zipArea">
                                <div class="upload-content" id="zipContent">
                                    <div class="upload-icon zip">
                                        <i class="fas fa-file-archive"></i>
                                    </div>
                                    <p class="upload-text">Drag & drop file ZIP game</p>
                                    <button type="button" class="btn-upload" onclick="document.getElementById('zipInput').click()">
                                        Pilih File ZIP
                                    </button>
                                    <span class="upload-hint">Max 100MB, harus ada index.html di root</span>
                                </div>
                                <div class="preview-content file-preview-box" id="zipPreview" style="display:none">
                                    <div class="file-info">
                                        <i class="fas fa-file-archive"></i>
                                        <span id="zipFileName">game.zip</span>
                                    </div>
                                    <button type="button" class="btn-remove-file" onclick="removeZip()">
                                        <i class="fas fa-times"></i>
                                    </button>
                                </div>
                                <input type="file" name="game_zip" id="zipInput" accept=".zip" hidden onchange="previewZip(this)">
                            </div>
                            @error('game_zip')
                                <span class="error-text">{{ $message }}</span>
                            @enderror

                            @if(isset($game) && $game->hasGameFiles())
                                <div class="current-file-info">
                                    <i class="fas fa-check-circle"></i>
                                    File game sudah terupload
                                    <a href="{{ asset('storage/games/' . $game->slug . '/index.html') }}" target="_blank" class="preview-link">
                                        <i class="fas fa-external-link-alt"></i> Preview
                                    </a>
                                </div>
                            @endif
                        </div>
                    </div>

                    {{-- Status --}}
                    <div class="form-section">
                        <h3 class="section-label">Status</h3>

                        <div class="form-group">
                            <label class="toggle-label">
                                <input type="checkbox" name="is_active" value="1"
                                       {{ old('is_active', $game->is_active ?? false) ? 'checked' : '' }}>
                                <span class="toggle-switch-large">
                                    <span class="toggle-slider-large"></span>
                                </span>
                                <span class="toggle-text">
                                    <strong>Game Aktif</strong>
                                    <small>User dapat memainkan game ini</small>
                                </span>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<style>
/* Game Form Page */
.game-form-page {
    max-width: 1400px;
}

/* Alert Styles */
.alert {
    padding: 16px 20px;
    border-radius: 12px;
    margin-bottom: 24px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.alert-danger {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}

.alert-danger i {
    color: #ef4444;
    font-size: 1.25rem;
    margin-top: 2px;
}

.alert-danger ul {
    margin: 8px 0 0 0;
    padding-left: 20px;
}

.alert-danger li {
    margin-bottom: 4px;
}

/* Page Header */
.page-header-game {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

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

.header-actions {
    display: flex;
    gap: 12px;
}

.btn-cancel {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: transparent;
    border: 2px solid var(--purple-primary);
    border-radius: 25px;
    color: var(--purple-primary);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.btn-cancel:hover {
    background: rgba(139, 92, 246, 0.1);
    color: var(--purple-primary);
}

.btn-save {
    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: 25px;
    color: white;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-save:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(139, 92, 246, 0.4);
}

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

/* Form Grid */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.form-column {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Form Section */
.form-section {
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(139, 92, 246, 0.1);
}

.form-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.section-label {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 20px 0;
}

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

.form-group:last-child {
    margin-bottom: 0;
}

.form-label {
    display: block;
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 500;
    margin-bottom: 10px;
}

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

.form-input {
    width: 100%;
    padding: 14px 18px;
    background: var(--bg-tertiary);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 0.9rem;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

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

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

.form-input.is-invalid {
    border-color: #ef4444;
}

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

.error-text {
    display: block;
    font-size: 0.75rem;
    color: #ef4444;
    margin-top: 6px;
}

/* Form Row */
.form-row {
    display: flex;
    gap: 16px;
}

.form-group.half {
    flex: 1;
}

/* Input with Icon */
.input-with-icon {
    position: relative;
}

.input-with-icon i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--cyan-primary);
}

.input-with-icon .form-input {
    padding-left: 44px;
}

/* Textarea */
.form-textarea {
    width: 100%;
    padding: 14px 18px;
    background: var(--bg-tertiary);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 0.9rem;
    transition: all 0.3s ease;
    resize: vertical;
    min-height: 100px;
    font-family: inherit;
    box-sizing: border-box;
}

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

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

.form-textarea.is-invalid {
    border-color: #ef4444;
}

/* Upload Area */
.upload-area {
    border: 2px dashed var(--purple-primary);
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    background: rgba(139, 92, 246, 0.05);
    transition: all 0.3s ease;
    position: relative;
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.upload-area:hover {
    background: rgba(139, 92, 246, 0.1);
    border-color: var(--cyan-primary);
}

.upload-area.dragover {
    background: rgba(6, 182, 212, 0.15);
    border-color: var(--cyan-primary);
}

.upload-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.upload-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--cyan-primary) 0%, #0891b2 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.upload-icon.zip {
    background: linear-gradient(135deg, var(--purple-primary) 0%, var(--purple-dark) 100%);
}

.upload-icon i {
    font-size: 1.25rem;
    color: white;
}

.upload-text {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin: 0;
}

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

.btn-upload {
    padding: 8px 20px;
    background: transparent;
    border: 2px solid var(--purple-primary);
    border-radius: 25px;
    color: var(--purple-primary);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

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

/* Preview Content */
.preview-content {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.preview-content img {
    max-width: 100%;
    max-height: 150px;
    border-radius: 8px;
    object-fit: contain;
}

.file-preview-box {
    padding: 16px 24px;
    background: var(--bg-tertiary);
    border-radius: 10px;
    border: 1px solid rgba(139, 92, 246, 0.2);
}

.file-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.file-info i {
    font-size: 1.5rem;
    color: var(--purple-primary);
}

.file-info span {
    color: var(--text-primary);
    font-size: 0.9rem;
}

.btn-remove-file {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 28px;
    height: 28px;
    background: #ef4444;
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    font-size: 0.75rem;
}

.btn-remove-file:hover {
    background: #dc2626;
    transform: scale(1.1);
}

/* Current File Info */
.current-file-info {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 12px 16px;
    background: rgba(34, 197, 94, 0.1);
    border-radius: 8px;
    border: 1px solid rgba(34, 197, 94, 0.2);
    color: #4ade80;
    font-size: 0.85rem;
}

.current-file-info i {
    color: #22c55e;
}

.preview-link {
    margin-left: auto;
    color: var(--cyan-primary);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.preview-link:hover {
    color: var(--purple-primary);
}

/* Toggle Switch Large */
.toggle-label {
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
}

.toggle-label input[type="checkbox"] {
    display: none;
}

.toggle-switch-large {
    position: relative;
    width: 56px;
    height: 30px;
    background: var(--bg-tertiary);
    border-radius: 15px;
    transition: all 0.3s ease;
    border: 2px solid rgba(139, 92, 246, 0.2);
    flex-shrink: 0;
}

.toggle-slider-large {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    background: var(--text-muted);
    border-radius: 50%;
    transition: all 0.3s ease;
}

.toggle-label input:checked + .toggle-switch-large {
    background: linear-gradient(135deg, var(--purple-primary) 0%, var(--cyan-primary) 100%);
    border-color: transparent;
}

.toggle-label input:checked + .toggle-switch-large .toggle-slider-large {
    transform: translateX(26px);
    background: white;
}

.toggle-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.toggle-text strong {
    color: var(--text-primary);
    font-size: 0.9rem;
}

.toggle-text small {
    color: var(--text-muted);
    font-size: 0.75rem;
}

/* Responsive */
@media (max-width: 992px) {
    .form-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .page-header-game {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }

    .header-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .form-row {
        flex-direction: column;
        gap: 0;
    }

    .game-form-card {
        padding: 20px;
    }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Thumbnail Upload
    const thumbnailArea = document.getElementById('thumbnailArea');
    const thumbnailInput = document.getElementById('thumbnailInput');

    if (thumbnailArea) {
        setupDragDrop(thumbnailArea, thumbnailInput, 'thumbnail');
    }

    // ZIP Upload
    const zipArea = document.getElementById('zipArea');
    const zipInput = document.getElementById('zipInput');

    if (zipArea) {
        setupDragDrop(zipArea, zipInput, 'zip');
    }

    // Auto-generate slug from name
    const nameInput = document.querySelector('input[name="name"]');
    const slugInput = document.querySelector('input[name="slug"]');

    if (nameInput && slugInput) {
        nameInput.addEventListener('input', function() {
            if (!slugInput.dataset.manual) {
                slugInput.value = generateSlug(this.value);
            }
        });

        slugInput.addEventListener('input', function() {
            this.dataset.manual = this.value.trim() !== '';
        });
    }
});

function setupDragDrop(area, input, type) {
    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
        area.addEventListener(eventName, preventDefaults, false);
    });

    ['dragenter', 'dragover'].forEach(eventName => {
        area.addEventListener(eventName, () => area.classList.add('dragover'), false);
    });

    ['dragleave', 'drop'].forEach(eventName => {
        area.addEventListener(eventName, () => area.classList.remove('dragover'), false);
    });

    area.addEventListener('drop', (e) => {
        const dt = e.dataTransfer;
        const files = dt.files;

        // Create a new DataTransfer object and add the files
        const dataTransfer = new DataTransfer();
        for (let i = 0; i < files.length; i++) {
            dataTransfer.items.add(files[i]);
        }
        input.files = dataTransfer.files;

        if (type === 'thumbnail') {
            previewThumbnail(input);
        } else {
            previewZip(input);
        }
    }, false);
}

function preventDefaults(e) {
    e.preventDefault();
    e.stopPropagation();
}

function generateSlug(text) {
    return text.toLowerCase()
        .replace(/[^\w\s-]/g, '')
        .replace(/\s+/g, '-')
        .replace(/-+/g, '-')
        .trim();
}

function previewThumbnail(input) {
    const file = input.files[0];
    if (file && file.type.startsWith('image/')) {
        const reader = new FileReader();
        reader.onload = function(e) {
            document.getElementById('thumbnailImage').src = e.target.result;
            document.getElementById('thumbnailContent').style.display = 'none';
            document.getElementById('thumbnailPreview').style.display = 'flex';
        };
        reader.readAsDataURL(file);
    }
}

function removeThumbnail() {
    document.getElementById('thumbnailInput').value = '';
    document.getElementById('thumbnailImage').src = '';
    document.getElementById('thumbnailContent').style.display = 'flex';
    document.getElementById('thumbnailPreview').style.display = 'none';
}

function previewZip(input) {
    const file = input.files[0];
    if (file) {
        document.getElementById('zipFileName').textContent = file.name;
        document.getElementById('zipContent').style.display = 'none';
        document.getElementById('zipPreview').style.display = 'flex';
    }
}

function removeZip() {
    document.getElementById('zipInput').value = '';
    document.getElementById('zipFileName').textContent = '';
    document.getElementById('zipContent').style.display = 'flex';
    document.getElementById('zipPreview').style.display = 'none';
}
</script>
@endsection