@extends('layouts.app')
 @section('title', 'WHMCS Admin - Product')
 @section('page-title', 'Products')

 @section('breadcrumb')
     <a href="{{ route('dashboard') }}" class="breadcrumb-item">Dashboard</a>
     <span class="breadcrumb-item active">Product</span>/Create
 @endsection

 @section('operation')
     <button class="whmcs-btn whmcs-btn-outline-secondary me-3" onclick="window.location.href='products.html'">
         <i class="fas fa-arrow-left me-2"></i>
         Back to Products
     </button>
 @endsection

 @section('content')
     @if ($errors->any())
         <div class="alert alert-danger">
             <strong>There were some problems with your submission:</strong>
             <ul class="mb-0">
                 @foreach ($errors->all() as $error)
                     <li>{{ $error }}</li>
                 @endforeach
             </ul>
         </div>
     @endif

     <form id="productCreateForm" method="POST" action="{{ route('product.store') }}" enctype="multipart/form-data"
         novalidate>
         @csrf
         <div class="row">
             <!-- Main Product Information -->
             <div class="col-lg-8">
                 <!-- Basic Information -->
                 <div class="whmcs-card mb-4">
                     <div class="whmcs-card-header">
                         <h5><i class="fas fa-info-circle me-2"></i>Basic Information</h5>
                     </div>
                     <div class="whmcs-card-body">
                         <div class="row">
                             <div class="col-md-8 mb-3">
                                 <label class="whmcs-form-label" for="productName">Product Name <span
                                         class="text-danger">*</span></label>
                                 <input type="text" class="whmcs-form-control" id="productName" name="productName"
                                     placeholder="Enter product name" required>
                                 <div class="form-text">This will be displayed to customers</div>
                             </div>
                             <div class="col-md-4 mb-3">
                                 <label class="whmcs-form-label" for="productSku">SKU <span
                                         class="text-danger">*</span></label>
                                 <input type="text" class="whmcs-form-control" id="productSku" name="productSku"
                                     placeholder="e.g., HOST-BASIC-001" required>
                                 <div class="form-text">Unique product identifier</div>
                             </div>
                         </div>

                         <div class="row">
                             <div class="col-md-6 mb-3">
                                 <label class="whmcs-form-label" for="productCategory">Category <span
                                         class="text-danger">*</span></label>
                                 <select class="whmcs-form-select form-control" id="productCategory" name="productCategory"
                                     required>
                                     <option value="">Select Category</option>
                                     <option value="hosting">Web Hosting</option>
                                     <option value="domain">Domain Names</option>
                                     <option value="ssl">SSL Certificates</option>
                                     <option value="vps">VPS Hosting</option>
                                     <option value="dedicated">Dedicated Servers</option>
                                     <option value="software">Software Licenses</option>
                                     <option value="other">Other</option>
                                 </select>
                             </div>
                             <div class="col-md-6 mb-3">
                                 <label class="whmcs-form-label" for="productType">Product Type <span
                                         class="text-danger">*</span></label>
                                 <select class="whmcs-form-select form-control" id="productType" name="productType"
                                     required>
                                     <option value="">Select Type</option>
                                     <option value="hosting">Hosting</option>
                                     <option value="domain">Domain</option>
                                     <option value="other">Other</option>
                                 </select>
                             </div>
                         </div>

                         <div class="mb-3">
                             <label class="whmcs-form-label" for="productDescription">Description</label>
                             <textarea class="whmcs-form-control" id="productDescription" name="productDescription" rows="3"
                                 placeholder="Enter product description"></textarea>
                             <div class="form-text">Brief description of the product</div>
                         </div>

                         <div class="mb-3">
                             <label class="whmcs-form-label" for="productDetails">Detailed Description</label>
                             <textarea class="whmcs-form-control" id="productDetails" name="productDetails" rows="5"
                                 placeholder="Enter detailed product information"></textarea>
                             <div class="form-text">Detailed information shown on product page</div>
                         </div>
                     </div>
                 </div>

                 <!-- Pricing Configuration -->
                 <div class="whmcs-card mb-4">
                     <div class="whmcs-card-header">
                         <h5><i class="fas fa-dollar-sign me-2"></i>Pricing Configuration</h5>
                     </div>
                     <div class="whmcs-card-body">
                         <div class="row">
                             <div class="col-md-6 mb-3">
                                 <label class="whmcs-form-label" for="pricingType">Pricing Type <span
                                         class="text-danger">*</span></label>
                                 <select class="whmcs-form-select form-control" id="pricingType" name="pricingType" required
                                     onchange="togglePricingFields()">
                                     <option value="">Select Pricing Type</option>
                                     <option value="recurring">Recurring</option>
                                     <option value="one-time">One-time Payment</option>
                                     <option value="free">Free</option>
                                 </select>
                             </div>
                             <div class="col-md-6 mb-3">
                                 <label class="whmcs-form-label" for="currency">Currency <span
                                         class="text-danger">*</span></label>
                                 <select class="whmcs-form-select form-control" id="currency" name="currency" required>
                                     <option value="USD">USD - US Dollar</option>
                                     <option value="EUR">EUR - Euro</option>
                                     <option value="GBP">GBP - British Pound</option>
                                     <option value="CAD">CAD - Canadian Dollar</option>
                                     <option value="AUD">AUD - Australian Dollar</option>
                                 </select>
                             </div>
                         </div>

                         <div id="recurringPricing" style="display: none;">
                             <div class="row">
                                 <div class="col-md-3 mb-3">
                                     <label class="whmcs-form-label" for="monthlyPrice">Monthly Price</label>
                                     <div class="input-group">
                                         <span class="input-group-text">$</span>
                                         <input type="number" class="whmcs-form-control" id="monthlyPrice"
                                             name="monthlyPrice" step="0.01" min="0" placeholder="0.00">
                                     </div>
                                 </div>
                                 <div class="col-md-3 mb-3">
                                     <label class="whmcs-form-label" for="quarterlyPrice">Quarterly Price</label>
                                     <div class="input-group">
                                         <span class="input-group-text">$</span>
                                         <input type="number" class="whmcs-form-control" id="quarterlyPrice"
                                             name="quarterlyPrice" step="0.01" min="0" placeholder="0.00">
                                     </div>
                                 </div>
                                 <div class="col-md-3 mb-3">
                                     <label class="whmcs-form-label" for="semiAnnualPrice">Semi-Annual Price</label>
                                     <div class="input-group">
                                         <span class="input-group-text">$</span>
                                         <input type="number" class="whmcs-form-control" id="semiAnnualPrice"
                                             name="semiAnnualPrice" step="0.01" min="0" placeholder="0.00">
                                     </div>
                                 </div>
                                 <div class="col-md-3 mb-3">
                                     <label class="whmcs-form-label" for="annualPrice">Annual Price</label>
                                     <div class="input-group">
                                         <span class="input-group-text">$</span>
                                         <input type="number" class="whmcs-form-control" id="annualPrice"
                                             name="annualPrice" step="0.01" min="0" placeholder="0.00">
                                     </div>
                                 </div>
                             </div>

                             <div class="row">
                                 <div class="col-md-3 mb-3">
                                     <label class="whmcs-form-label" for="biennialPrice">Biennial Price</label>
                                     <div class="input-group">
                                         <span class="input-group-text">$</span>
                                         <input type="number" class="whmcs-form-control" id="biennialPrice"
                                             name="biennialPrice" step="0.01" min="0" placeholder="0.00">
                                     </div>
                                 </div>
                                 <div class="col-md-3 mb-3">
                                     <label class="whmcs-form-label" for="triennialPrice">Triennial Price</label>
                                     <div class="input-group">
                                         <span class="input-group-text">$</span>
                                         <input type="number" class="whmcs-form-control" id="triennialPrice"
                                             name="triennialPrice" step="0.01" min="0" placeholder="0.00">
                                     </div>
                                 </div>
                                 <div class="col-md-6 mb-3">
                                     <label class="whmcs-form-label" for="setupFee">Setup Fee</label>
                                     <div class="input-group">
                                         <span class="input-group-text">$</span>
                                         <input type="number" class="whmcs-form-control" id="setupFee" name="setupFee"
                                             step="0.01" min="0" placeholder="0.00">
                                     </div>
                                     <div class="form-text">One-time setup fee (optional)</div>
                                 </div>
                             </div>
                         </div>

                         <div id="oneTimePricing" style="display: none;">
                             <div class="row">
                                 <div class="col-md-6 mb-3">
                                     <label class="whmcs-form-label" for="oneTimePrice">Price <span
                                             class="text-danger">*</span></label>
                                     <div class="input-group">
                                         <span class="input-group-text">$</span>
                                         <input type="number" class="whmcs-form-control" id="oneTimePrice"
                                             name="oneTimePrice" step="0.01" min="0" placeholder="0.00">
                                     </div>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>

                 <!-- Product Features -->
                 <div class="whmcs-card mb-4">
                     <div class="whmcs-card-header d-flex justify-content-between align-items-center">
                         <h5><i class="fas fa-list me-2"></i>Product Features</h5>
                         <button type="button" class="whmcs-btn whmcs-btn-sm whmcs-btn-primary" onclick="addFeature()">
                             <i class="fas fa-plus me-2"></i>Add Feature
                         </button>
                     </div>
                     <div class="whmcs-card-body">
                         <div id="featuresContainer">
                             <div class="feature-item mb-3">
                                 <div class="row">
                                     <div class="col-md-10">
                                         <input type="text" class="whmcs-form-control" name="features[]"
                                             placeholder="Enter product feature">
                                     </div>
                                     <div class="col-md-2">
                                         <button type="button" class="whmcs-btn whmcs-btn-sm whmcs-btn-outline-danger"
                                             onclick="removeFeature(this)">
                                             <i class="fas fa-trash"></i>
                                         </button>
                                     </div>
                                 </div>
                             </div>
                         </div>
                         <div class="form-text">Add key features that will be displayed to customers</div>
                     </div>
                 </div>

                 <!-- Server Configuration (for hosting products) -->
                 <div class="whmcs-card mb-4" id="serverConfig" style="display: none;">
                     <div class="whmcs-card-header">
                         <h5><i class="fas fa-server me-2"></i>Server Configuration</h5>
                     </div>
                     <div class="whmcs-card-body">
                         <div class="row">
                             <div class="col-md-6 mb-3">
                                 <label class="whmcs-form-label" for="serverGroup">Server Group</label>
                                 <select class="whmcs-form-select form-control" id="serverGroup" name="serverGroup">
                                     <option value="">Select Server Group</option>
                                     <option value="shared-hosting">Shared Hosting Servers</option>
                                     <option value="vps-hosting">VPS Hosting Servers</option>
                                     <option value="dedicated-hosting">Dedicated Servers</option>
                                 </select>
                             </div>
                             <div class="col-md-6 mb-3">
                                 <label class="whmcs-form-label"  for="module">Module</label>
                                 <select class="whmcs-form-select form-control" id="module" name="module">
                                     <option value="">Select Module</option>
                                     <option value="cpanel">cPanel</option>
                                     <option value="plesk">Plesk</option>
                                     <option value="directadmin">DirectAdmin</option>
                                     <option value="custom">Custom Module</option>
                                 </select>
                             </div>
                         </div>

                         <div class="row">
                             <div class="col-md-4 mb-3">
                                 <label class="whmcs-form-label" for="diskSpace">Disk Space (GB)</label>
                                 <input type="number" class="whmcs-form-control" id="diskSpace" name="diskSpace"
                                     min="0" placeholder="e.g., 10">
                             </div>
                             <div class="col-md-4 mb-3">
                                 <label class="whmcs-form-label" for="bandwidth">Bandwidth (GB)</label>
                                 <input type="number" class="whmcs-form-control" id="bandwidth" name="bandwidth"
                                     min="0" placeholder="e.g., 100">
                             </div>
                             <div class="col-md-4 mb-3">
                                 <label class="whmcs-form-label" for="emailAccounts">Email Accounts</label>
                                 <input type="number" class="whmcs-form-control" id="emailAccounts"
                                     name="emailAccounts" min="0" placeholder="e.g., 10">
                             </div>
                         </div>
                     </div>
                 </div>
             </div>

             <!-- Sidebar Settings -->
             <div class="col-lg-4">
                 <!-- Product Status -->
                 <div class="whmcs-card mb-4">
                     <div class="whmcs-card-header">
                         <h5><i class="fas fa-toggle-on me-2"></i>Product Status</h5>
                     </div>
                     <div class="whmcs-card-body">
                         <div class="mb-3">
                             <label class="whmcs-form-label" for="productStatus">Status <span
                                     class="text-danger">*</span></label>
                             <select class="whmcs-form-select form-control" id="productStatus" name="productStatus"
                                 required>
                                 <option value="active">Active</option>
                                 <option value="inactive">Inactive</option>
                                 <option value="hidden">Hidden</option>
                             </select>
                             <div class="form-text">
                                 <strong>Active:</strong> Visible and orderable<br>
                                 <strong>Inactive:</strong> Not orderable<br>
                                 <strong>Hidden:</strong> Not visible to customers
                             </div>
                         </div>

                         <!-- Featured Product -->
                         <div class="mb-3">
                             <input type="hidden" name="featured" value="0">
                             <div class="form-check">
                                 <input class="form-check-input" type="checkbox" id="featured" name="featured"
                                     value="1">
                                 <label class="form-check-label" for="featured">
                                     Featured Product
                                 </label>
                             </div>
                             <div class="form-text">Display prominently on homepage</div>
                         </div>

                         <!-- Automatic Setup -->
                         <div class="mb-3">
                             <input type="hidden" name="autoSetup" value="0">
                             <div class="form-check">
                                 <input class="form-check-input" type="checkbox" id="autoSetup" name="autoSetup"
                                     value="1">
                                 <label class="form-check-label" for="autoSetup">
                                     Automatic Setup
                                 </label>
                             </div>
                             <div class="form-text">Automatically provision after payment</div>
                         </div>


                     </div>
                 </div>

                 <!-- Stock Management -->
                 <div class="whmcs-card mb-4">
                     <div class="whmcs-card-header">
                         <h5><i class="fas fa-warehouse me-2"></i>Stock Management</h5>
                     </div>
                     <div class="whmcs-card-body">
                         <div class="mb-3">
                             <div class="form-check">
                                 <input class="form-check-input" type="checkbox" id="trackStock" name="trackStock"
                                     onchange="toggleStockFields()">
                                 <label class="form-check-label" for="trackStock">
                                     Track Stock Quantity
                                 </label>
                             </div>
                         </div>

                         <div id="stockFields" style="display: none;">
                             <div class="mb-3">
                                 <label class="whmcs-form-label" for="stockQuantity">Stock Quantity</label>
                                 <input type="number" class="whmcs-form-control" id="stockQuantity"
                                     name="stockQuantity" min="0" placeholder="0">
                             </div>

                             <div class="mb-3">
                                 <label class="whmcs-form-label" for="lowStockThreshold">Low Stock Alert</label>
                                 <input type="number" class="whmcs-form-control" id="lowStockThreshold"
                                     name="lowStockThreshold" min="0" placeholder="5">
                                 <div class="form-text">Alert when stock falls below this number</div>
                             </div>

                             <div class="mb-3">
                                 <div class="form-check">
                                     <input class="form-check-input" type="checkbox" id="allowBackorders"
                                         name="allowBackorders">
                                     <label class="form-check-label" for="allowBackorders">
                                         Allow Backorders
                                     </label>
                                 </div>
                                 <div class="form-text">Allow orders when out of stock</div>
                             </div>
                         </div>
                     </div>
                 </div>

                 <!-- SEO Settings -->
                 <div class="whmcs-card mb-4">
                     <div class="whmcs-card-header">
                         <h5><i class="fas fa-search me-2"></i>SEO Settings</h5>
                     </div>
                     <div class="whmcs-card-body">
                         <div class="mb-3">
                             <label class="whmcs-form-label" for="metaTitle">Meta Title</label>
                             <input type="text" class="whmcs-form-control" id="metaTitle" name="metaTitle"
                                 placeholder="SEO title for search engines">
                             <div class="form-text">Recommended: 50-60 characters</div>
                         </div>

                         <div class="mb-3">
                             <label class="whmcs-form-label" for="metaDescription">Meta Description</label>
                             <textarea class="whmcs-form-control" id="metaDescription" name="metaDescription" rows="3"
                                 placeholder="SEO description for search engines"></textarea>
                             <div class="form-text">Recommended: 150-160 characters</div>
                         </div>

                         <div class="mb-3">
                             <label class="whmcs-form-label" for="urlSlug">URL Slug</label>
                             <input type="text" class="whmcs-form-control" id="urlSlug" name="urlSlug"
                                 placeholder="product-url-slug">
                             <div class="form-text">Auto-generated from product name if empty</div>
                         </div>
                     </div>
                 </div>

                 <!-- Product Image -->
                 <div class="whmcs-card mb-4">
                     <div class="whmcs-card-header">
                         <h5><i class="fas fa-image me-2"></i>Product Image</h5>
                     </div>
                     <div class="whmcs-card-body">
                         <div class="mb-3">
                             <input type="file" class="whmcs-form-control" id="productImage" name="productImage"
                                 accept="image/*" onchange="previewImage(this)">
                             <div class="form-text">Recommended: 800x600px, max 2MB</div>
                         </div>

                         <div id="imagePreview" class="text-center" style="display: none;">
                             <img id="previewImg" src="" alt="Product Image Preview" class="img-fluid rounded"
                                 style="max-height: 200px;">
                             <div class="mt-2">
                                 <button type="button" class="whmcs-btn whmcs-btn-sm whmcs-btn-outline-danger"
                                     onclick="removeImage()">
                                     <i class="fas fa-trash me-2"></i>Remove Image
                                 </button>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
         <!-- Form Actions -->
         <div class="row">
             <div class="col-12">
                 <div class="whmcs-card">
                     <div class="whmcs-card-body">
                         <div class="d-flex justify-content-between align-items-center">
                             <div>
                                 <button type="button" class="whmcs-btn whmcs-btn-outline-secondary"
                                     onclick="window.location.href='products.html'">
                                     <i class="fas fa-times me-2"></i>Cancel
                                 </button>
                                 <button type="button" class="whmcs-btn whmcs-btn-outline-primary ms-2"
                                     onclick="saveDraft()">
                                     <i class="fas fa-save me-2"></i>Save as Draft
                                 </button>
                             </div>
                             <div>
                                 <button type="submit" class="whmcs-btn whmcs-btn-success" id="createProductBtn">
                                     <i class="fas fa-plus me-2"></i>
                                     <span class="btn-text">Create Product</span>
                                 </button>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
     </form>
 @endsection

 @push('scripts')
     <script>
         $(function() {
             setupFormValidation();
             setupAutoSlug();

             // Show/hide server config for hosting
             $('#productType').on('change', function() {
                 if ($(this).val() === 'hosting') {
                     $('#serverConfig').show();
                 } else {
                     $('#serverConfig').hide();
                 }
             });

             // Load draft
             /*   const draft = localStorage.getItem('productDraft');
               if (draft) {
                   if (confirm('A draft was found. Load it?')) {
                       const draftData = JSON.parse(draft);
                       $.each(draftData, function(key, value) {
                           const field = $(`[name="${key}"]`);
                           if (field.length) {
                               field.val(value);
                               if (field.is('select')) {
                                   field.trigger('change');
                               }
                           }
                       });
                       showNotification('Draft loaded!', 'info');
                   }
               } */
         });

         function togglePricingFields() {
             const type = $('#pricingType').val();
             $('#recurringPricing, #oneTimePricing').hide();
             if (type === 'recurring') {
                 $('#recurringPricing').show();
             } else if (type === 'one-time') {
                 $('#oneTimePricing').show();
             }
         }

         function toggleStockFields() {
             $('#trackStock').is(':checked') ? $('#stockFields').show() : $('#stockFields').hide();
         }

         function addFeature() {
             $('#featuresContainer').append(`
            <div class="feature-item mb-3">
                <div class="row">
                    <div class="col-md-10">
                        <input type="text" class="whmcs-form-control" name="features[]" placeholder="Enter product feature">
                    </div>
                    <div class="col-md-2">
                        <button type="button" class="whmcs-btn whmcs-btn-sm whmcs-btn-outline-danger remove-feature-btn">
                            <i class="fas fa-trash"></i>
                        </button>
                    </div>
                </div>
            </div>
        `);
         }

         $(document).on('click', '.remove-feature-btn', function() {
             $(this).closest('.feature-item').remove();
         });

         function previewImage(input) {
             const preview = $('#imagePreview');
             const previewImg = $('#previewImg');

             if (input.files && input.files[0]) {
                 const reader = new FileReader();
                 reader.onload = function(e) {
                     previewImg.attr('src', e.target.result);
                     preview.show();
                 };
                 reader.readAsDataURL(input.files[0]);
             }
         }

         function removeImage() {
             $('#productImage').val('');
             $('#imagePreview').hide();
         }

         function setupAutoSlug() {
             const nameInput = $('#productName');
             const slugInput = $('#urlSlug');

             nameInput.on('input', function() {
                 if (!slugInput.val() || slugInput.data('auto') !== false) {
                     const slug = $(this).val()
                         .toLowerCase()
                         .replace(/[^a-z0-9\s-]/g, '')
                         .replace(/\s+/g, '-')
                         .replace(/-+/g, '-')
                         .replace(/^-+|-+$/g, '');
                     slugInput.val(slug);
                     slugInput.data('auto', true);
                 }
             });

             slugInput.on('input', function() {
                 $(this).data('auto', false);
             });
         }

         function setupFormValidation() {
             const form = $('#productCreateForm');
             form.on('submit', function(e) {
                 e.preventDefault();
                 if (validateForm()) {
                     submitForm();
                 }
             });

             form.find('[required]').each(function() {
                 $(this).on('blur', function() {
                     validateField(this);
                 });
                 $(this).on('input', function() {
                     clearFieldError(this);
                 });
             });
         }

         function validateForm() {
             let isValid = true;
             const form = $('#productCreateForm');

             $('.is-invalid').each(function() {
                 clearFieldError(this);
             });

             form.find('[required]').each(function() {
                 if (!validateField(this)) isValid = false;
             });

             const pricingType = $('#pricingType').val();

             if (pricingType === 'recurring') {
                 const pricingFields = ['#monthlyPrice', '#quarterlyPrice', '#semiAnnualPrice', '#annualPrice',
                     '#biennialPrice', '#triennialPrice'
                 ];
                 const hasPrice = pricingFields.some(id => parseFloat($(id).val()) > 0);
                 if (!hasPrice) {
                     showFieldError($('#monthlyPrice')[0], 'At least one recurring price is required');
                     isValid = false;
                 }
             } else if (pricingType === 'one-time') {
                 const price = parseFloat($('#oneTimePrice').val());
                 if (!price || price <= 0) {
                     showFieldError($('#oneTimePrice')[0], 'Price is required');
                     isValid = false;
                 }
             }

             const features = $('input[name="features[]"]');
             const hasFeatures = features.toArray().some(f => $(f).val().trim());
             if (!hasFeatures) {
                 showNotification('Add at least one product feature', 'warning');
             }

             return isValid;
         }

         function validateField(field) {
             const $field = $(field);
             const value = $field.val().trim();
             let isValid = true;
             let errorMessage = '';

             if ($field.prop('required') && !value) {
                 errorMessage = `${getFieldLabel(field)} is required`;
                 isValid = false;
             }

             if (field.id === 'productSku' && value && !/^[A-Z0-9-]+$/.test(value)) {
                 errorMessage = 'SKU must use uppercase letters, numbers, and hyphens only';
                 isValid = false;
             }

             if ($field.attr('type') === 'number' && $field.attr('name').includes('Price') && value < 0) {
                 errorMessage = 'Price cannot be negative';
                 isValid = false;
             }

             if (!isValid) showFieldError(field, errorMessage);
             return isValid;
         }

         function showFieldError(field, message) {
             const $field = $(field);
             $field.addClass('is-invalid');
             let errorDiv = $field.parent().find('.invalid-feedback');
             if (!errorDiv.length) {
                 errorDiv = $('<div class="invalid-feedback"></div>');
                 $field.parent().append(errorDiv);
             }
             errorDiv.text(message);
         }

         function clearFieldError(field) {
             $(field).removeClass('is-invalid').parent().find('.invalid-feedback').remove();
         }

         function getFieldLabel(field) {
             const label = $(`label[for="${field.id}"]`);
             return label.length ? label.text().replace(' *', '') : field.placeholder || field.name;
         }

         async function submitForm() {
             const btn = $('#createProductBtn');
             const btnText = btn.find('.btn-text');

             btn.prop('disabled', true);
             btnText.text('Saving...');
             btn.prepend('<span class="spinner-border spinner-border-sm me-2"></span>');

             const form = $('#productCreateForm')[0];
             const formData = new FormData(form);

             try {
                 const response = await $.ajax({
                     url: form.action,
                     method: form.method,
                     data: formData,
                     processData: false,
                     contentType: false,
                 });

                 if (response.status) {
                     showNotification(response.msg || 'Product saved!', 'success');
                     localStorage.removeItem('productDraft');
                     setTimeout(() => {
                         window.location.href = response.url || '{{ route('product') }}';
                     }, 1500);
                 } else {
                     showNotification(response.message || 'Something went wrong.', 'danger');
                 }

             } catch (error) {
                 console.error(error);
                 showNotification('Error saving product. Please try again.', 'danger');
             } finally {
                 btn.prop('disabled', false);
                 btnText.text('Create Product');
                 btn.find('.spinner-border').remove();
             }
         }

         function saveDraft() {
             showNotification('Draft saved!', 'info');
             setTimeout(() => {
                 const formData = new FormData($('#productCreateForm')[0]);
                 const draftData = {};
                 formData.forEach((value, key) => {
                     draftData[key] = value;
                 });
                 localStorage.setItem('productDraft', JSON.stringify(draftData));
             }, 500);
         }

         function showNotification(message, type) {
             const notification = $(`
            <div class="alert alert-${type} alert-dismissible fade show position-fixed" 
                style="top: 20px; right: 20px; z-index: 9999; min-width: 300px;">
                ${message}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        `);
             $('body').append(notification);
             setTimeout(() => notification.alert('close'), 5000);
         }
     </script>
 @endpush