@extends('admin.layouts.app')

@section('title', 'Add New Mod')

@section('content')
<div class="glass-panel" style="padding: 30px; max-width: 600px; margin: 0 auto;">
    <div style="margin-bottom: 24px; display: flex; justify-content: space-between; align-items: center;">
        <h2 style="font-size: 24px;">Add New Mod</h2>
        <a href="{{ route('admin.mods.index') }}" class="btn" style="background: rgba(255,255,255,0.1); color: var(--text-primary);">
            <i class="fas fa-arrow-left"></i> Back
        </a>
    </div>

    @if($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form action="{{ route('admin.mods.store') }}" method="POST">
        @csrf
        
        <div class="form-group">
            <label>Category</label>
            <select name="category" class="input-with-icon" style="width: 100%; padding: 14px 16px; background: rgba(15, 23, 42, 0.4); border: 1px solid var(--glass-border); border-radius: 12px; color: var(--text-primary); font-family: inherit; font-size: 15px;" required>
                <option value="Android" style="color: #000;">Android</option>
                <option value="iPhone" style="color: #000;">iPhone</option>
                <option value="PC" style="color: #000;">PC</option>
            </select>
        </div>

        <div class="form-group">
            <label>Mod Name</label>
            <div class="input-with-icon">
                <i class="fas fa-gamepad"></i>
                <input type="text" name="name" required placeholder="e.g. PUBG Safe Loader">
            </div>
        </div>

        <div class="form-group">
            <label>Description (Optional)</label>
            <textarea name="description" rows="4" placeholder="Brief details about the mod..." style="width: 100%; padding: 14px 16px; background: rgba(15, 23, 42, 0.4); border: 1px solid var(--glass-border); border-radius: 12px; color: var(--text-primary); font-family: inherit; font-size: 15px; resize: vertical;"></textarea>
        </div>

        <div class="form-group">
            <label>Mod Link (Optional)</label>
            <div class="input-with-icon">
                <i class="fas fa-link"></i>
                <input type="url" name="mod_link" placeholder="https://example.com/download.apk">
            </div>
        </div>

        <div class="form-group">
            <label>Status</label>
            <select name="status" class="input-with-icon" style="width: 100%; padding: 14px 16px; background: rgba(15, 23, 42, 0.4); border: 1px solid var(--glass-border); border-radius: 12px; color: var(--text-primary); font-family: inherit; font-size: 15px;" required>
                <option value="active" style="color: #000;">Active</option>
                <option value="inactive" style="color: #000;">Inactive</option>
            </select>
        </div>

        <button type="submit" class="btn btn-primary btn-block" style="margin-top: 20px;">
            <i class="fas fa-save"></i> Save Mod
        </button>
    </form>
</div>
@endsection