@extends('layouts.app')

@section('content')
<div class="academy-container" style="max-width: 650px;">
    <a href="{{ route('store') }}" class="btn-back-icon-top">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-6 h-6">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 15L3 9m0 0l6-6M3 9h12a6 6 0 010 12h-3" />
        </svg>
    </a>

    <h1>📤 ثبت فایل جدید برای فروش</h1>
    <p class="folder-description">
        مشخصات فایل خود را وارد کنید. فایل‌ها پس از تایید توسط ادمین در بازارچه ربات منتشر خواهند شد.
    </p>

    @if ($errors->any())
        <div class="alert alert-danger" style="display: block; margin-bottom: 20px;">
            <ul style="margin: 0; padding-right: 20px;">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form action="{{ route('store.store') }}" method="POST" enctype="multipart/form-data" class="form-wrapper">
        @csrf

        <div class="form-group">
            <label for="file_name">🏷️ نام فایل</label>
            <input type="text" name="file_name" id="file_name" class="form-control" value="{{ old('file_name') }}" required placeholder="مثال: آموزش جامع اکسل">
        </div>

        <div class="form-group">
            <label for="categories">📁 دسته‌بندی</label>
            <input type="text" name="categories" id="categories" class="form-control" value="{{ old('categories') }}" required placeholder="مثال: آموزشی، حسابداری">
        </div>

        <div class="form-group">
            <label for="description">📝 توضیحات فایل</label>
            <textarea name="description" id="description" class="form-control" rows="5" required placeholder="توضیحاتی درباره ویژگی‌ها و سرفصل‌های فایل بنویسید...">{{ old('description') }}</textarea>
        </div>

        <div class="form-row">
            <div class="form-group">
                <label for="price">💵 قیمت (تومان)</label>
                <input type="number" name="price" id="price" class="form-control" value="{{ old('price', 0) }}" min="0" required>
            </div>
            <div class="form-group">
                <label for="star_price">⭐️ قیمت (ستاره تلگرام)</label>
                <input type="number" name="star_price" id="star_price" class="form-control" value="{{ old('star_price', 0) }}" min="0" required>
            </div>
        </div>

        <div class="form-group">
            <label for="file_banner">🖼️ تصویر کاور / بنر (اختیاری)</label>
            <input type="file" name="file_banner" id="file_banner" class="form-control" accept="image/*">
        </div>

        <div class="form-group">
            <label>⚙️ نحوه ارسال فایل اصلی</label>
            <div class="radio-group">
                <label class="radio-label">
                    <input type="radio" name="upload_type" value="web" checked onchange="toggleUploadType('web')">
                    آپلود مستقیم از طریق وب سایت (حداکثر ۱۰۰ مگابایت)
                </label>
                <label class="radio-label" style="margin-top: 10px;">
                    <input type="radio" name="upload_type" value="bot" onchange="toggleUploadType('bot')">
                    ارسال از طریق ربات تلگرام (مناسب فایل‌های سنگین یا فوروارد)
                </label>
            </div>
        </div>

        <div class="form-group" id="web_file_wrapper">
            <label for="file">📎 انتخاب فایل اصلی</label>
            <input type="file" name="file" id="file" class="form-control">
        </div>

        <button type="submit" class="btn-submit">🚀 ثبت و ثبت نهایی فایل</button>
    </form>
</div>

<style>
.form-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 2rem;
}
.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.form-group label {
    font-weight: bold;
    font-size: 0.95rem;
    color: #4a5568;
}
.form-control {
    background: #e0e5ec;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: inset 2px 2px 5px rgba(163, 177, 198, 0.5), inset -2px -2px 5px rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    padding: 10px 15px;
    color: #4a5568;
    font-family: inherit;
    font-size: 0.95rem;
    transition: all 0.3s;
}
.form-control:focus {
    border-color: var(--accent-color);
    outline: none;
}
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.radio-group {
    background: #e0e5ec;
    padding: 15px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: inset 2px 2px 5px rgba(163, 177, 198, 0.5), inset -2px -2px 5px rgba(255, 255, 255, 0.8);
}
.radio-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 0.9rem;
    color: #4a5568;
}
.btn-submit {
    background: var(--accent-color);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 14px;
    font-size: 1.05rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
    margin-top: 1rem;
    box-shadow: 3px 3px 6px rgba(108, 92, 231, 0.3);
}
.btn-submit:hover {
    background: #e0e5ec;
    color: #6c5ce7;
    transform: translateY(-2px);
    box-shadow: 4px 4px 10px rgba(163, 177, 198, 0.5), -4px -4px 10px rgba(255, 255, 255, 0.8);
}
@media (max-width: 500px) {
    .form-row {
        grid-template-columns: 1fr;
    }
}
</style>

<script>
function toggleUploadType(type) {
    const webWrapper = document.getElementById('web_file_wrapper');
    const fileInput = document.getElementById('file');
    if (type === 'web') {
        webWrapper.style.display = 'flex';
        fileInput.required = true;
    } else {
        webWrapper.style.display = 'none';
        fileInput.required = false;
    }
}
// Init requirement on load
document.addEventListener('DOMContentLoaded', () => {
    toggleUploadType('web');
});
</script>
@endsection