@extends('core::layouts.master')

@section('content')
    <div class="card">
        <h1>تست ثبت محصول (AJAX + JSON)</h1>
        
        <form id="addProductForm" style="margin-top: 20px;">
            <div style="margin-bottom: 10px;">
                <label>نام محصول:</label><br>
                <input type="text" name="title" required>
            </div>
            <div style="margin-bottom: 10px;">
                <label>قیمت:</label><br>
                <input type="number" name="price" required>
            </div>
            <div style="margin-bottom: 10px;">
                <label>رنگ (فیلد داینامیک JSON):</label><br>
                <input type="text" name="color" required>
            </div>
            <button type="submit" style="padding: 10px; background: #28a745; color: #fff; border: none; cursor: pointer;">ثبت محصول با AJAX</button>
        </form>

        <div id="resultMessage" style="margin-top: 20px; color: green; font-weight: bold;"></div>
    </div>
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            $('#addProductForm').on('submit', function(e) {
                e.preventDefault(); // جلوگیری از رفرش صفحه

                let formData = $(this).serialize(); // جمع‌آوری داده‌های فرم

                $.ajax({
                    url: "{{ route('admin.products.store') }}",
                    type: "POST",
                    data: formData,
                    success: function(response) {
                        if(response.success) {
                            $('#resultMessage').text(response.message + ' (شناسه محصول: ' + response.data.id + ')');
                            $('#addProductForm')[0].reset(); // خالی کردن فرم
                            console.log("اطلاعات محصول ذخیره شده:", response.data);
                        }
                    },
                    error: function(xhr) {
                        alert('خطایی رخ داده است!');
                        console.log(xhr.responseText);
                    }
                });
            });
        });
    </script>
@endsection
