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

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

@section('operation')
    <button class="whmcs-btn whmcs-btn-outline-secondary me-3" onclick="window.location.href='{{ route('product') }}'">
        <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.update', $product->id) }}" enctype="multipart/form-data"  novalidate>
        @csrf
        @method('PUT')

        <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
                                    value="{{ old('productName', $product->name) }}">
                                <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
                                    value="{{ old('productSku', $product->sku) }}">
                                <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 onchange="toggleServerConfig()">
                                    <option value="">Select Category</option>
                                    @foreach(['hosting' => 'Web Hosting', 'domain' => 'Domain Names', 'ssl' => 'SSL Certificates', 'vps' => 'VPS Hosting', 'dedicated' => 'Dedicated Servers', 'software' => 'Software Licenses', 'other' => 'Other'] as $key => $label)
                                        <option value="{{ $key }}" {{ old('productCategory', $product->category) == $key ? 'selected' : '' }}>
                                            {{ $label }}
                                        </option>
                                    @endforeach
                                </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>
                                    @foreach(['hosting' => 'Hosting', 'domain' => 'Domain', 'other' => 'Other'] as $key => $label)
                                        <option value="{{ $key }}" {{ old('productType', $product->type) == $key ? 'selected' : '' }}>
                                            {{ $label }}
                                        </option>
                                    @endforeach
                                </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">{{ old('productDescription', $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">{{ old('productDetails', $product->detailed_description) }}</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" {{ old('pricingType', $product->pricing->pricing_type ?? '') == 'recurring' ? 'selected' : '' }}>Recurring</option>
                                    <option value="one-time" {{ old('pricingType', $product->pricing->pricing_type ?? '') == 'one-time' ? 'selected' : '' }}>One-time Payment</option>
                                    <option value="free" {{ old('pricingType', $product->pricing->pricing_type ?? '') == 'free' ? 'selected' : '' }}>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>
                                    @foreach(['USD' => 'USD - US Dollar', 'EUR' => 'EUR - Euro', 'GBP' => 'GBP - British Pound', 'CAD' => 'CAD - Canadian Dollar', 'AUD' => 'AUD - Australian Dollar'] as $code => $label)
                                        <option value="{{ $code }}" {{ old('currency', $product->pricing->currency ?? '') == $code ? 'selected' : '' }}>
                                            {{ $label }}
                                        </option>
                                    @endforeach
                                </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"
                                            value="{{ old('monthlyPrice', $product->pricing->monthly_price ?? '') }}">
                                    </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"
                                            value="{{ old('quarterlyPrice', $product->pricing->quarterly_price ?? '') }}">
                                    </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"
                                            value="{{ old('semiAnnualPrice', $product->pricing->semi_annual_price ?? '') }}">
                                    </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"
                                            value="{{ old('annualPrice', $product->pricing->annual_price ?? '') }}">
                                    </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"
                                            value="{{ old('biennialPrice', $product->pricing->biennial_price ?? '') }}">
                                    </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"
                                            value="{{ old('triennialPrice', $product->pricing->triennial_price ?? '') }}">
                                    </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"
                                            value="{{ old('setupFee', $product->pricing->setup_fee ?? '') }}">
                                    </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"
                                            value="{{ old('oneTimePrice', $product->pricing->one_time_price ?? '') }}">
                                    </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">
                            @php
                                $features = old('features', $product->features->pluck('feature')->toArray());
                            @endphp
                            @if(count($features) > 0)
                                @foreach($features as $feature)
                                    <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" value="{{ $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>
                                @endforeach
                            @else
                                <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>
                            @endif
                        </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" {{ old('serverGroup', $product->server_group) == 'shared-hosting' ? 'selected' : '' }}>Shared Hosting Servers</option>
                                    <option value="vps-hosting" {{ old('serverGroup', $product->server_group) == 'vps-hosting' ? 'selected' : '' }}>VPS Hosting Servers</option>
                                    <option value="dedicated-hosting" {{ old('serverGroup', $product->server_group) == 'dedicated-hosting' ? 'selected' : '' }}>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>
                                    @foreach(['cpanel' => 'cPanel', 'plesk' => 'Plesk', 'directadmin' => 'DirectAdmin', 'custom' => 'Custom Module'] as $key => $label)
                                        <option value="{{ $key }}" {{ old('module', $product->module) == $key ? 'selected' : '' }}>
                                            {{ $label }}
                                        </option>
                                    @endforeach
                                </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" value="{{ old('diskSpace', $product->disk_space) }}">
                            </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" value="{{ old('bandwidth', $product->bandwidth) }}">
                            </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" value="{{ old('emailAccounts', $product->email_accounts) }}">
                            </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" {{ old('productStatus', $product->status) == 'active' ? 'selected' : '' }}>Active</option>
                                <option value="inactive" {{ old('productStatus', $product->status) == 'inactive' ? 'selected' : '' }}>Inactive</option>
                                <option value="hidden" {{ old('productStatus', $product->status) == 'hidden' ? 'selected' : '' }}>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" {{ old('featured', $product->featured) ? 'checked' : '' }}>
                                <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" {{ old('autoSetup', $product->auto_setup) ? 'checked' : '' }}>
                                <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()" {{ old('trackStock', $product->track_stock) ? 'checked' : '' }}>
                                <label class="form-check-label" for="trackStock">
                                    Track Stock Quantity
                                </label>
                            </div>
                        </div>

                        <div id="stockFields" style="{{ old('trackStock', $product->track_stock) ? '' : '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" value="{{ old('stockQuantity', $product->stock_quantity) }}">
                            </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" value="{{ old('lowStockThreshold', $product->low_stock_threshold) }}">
                                <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" {{ old('allowBackorders', $product->allow_backorders) ? 'checked' : '' }}>
                                    <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" value="{{ old('metaTitle', $product->meta_title) }}">
                            <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">{{ old('metaDescription', $product->meta_description) }}</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" value="{{ old('urlSlug', $product->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>

                        @if ($product->image_url)
                            <div id="imagePreview" class="text-center">
                                <img id="previewImg" src="{{ asset('storage/' . $product->image_url) }}" 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>
                        @else
                            <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>
                        @endif
                    </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='{{ route('product') }}'">
                                    <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="updateProductBtn">
                                    <i class="fas fa-save me-2"></i>
                                    <span class="btn-text">Update Product</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>

  {{--   <script>
        function togglePricingFields() {
            const pricingType = document.getElementById('pricingType').value;
            document.getElementById('recurringPricing').style.display = pricingType === 'recurring' ? 'block' : 'none';
            document.getElementById('oneTimePricing').style.display = pricingType === 'one-time' ? 'block' : 'none';
        }
        function toggleStockFields() {
            const trackStock = document.getElementById('trackStock').checked;
            document.getElementById('stockFields').style.display = trackStock ? 'block' : 'none';
        }
        function addFeature() {
            const container = document.getElementById('featuresContainer');
            const html = `
                <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>`;
            container.insertAdjacentHTML('beforeend', html);
        }
        function removeFeature(button) {
            button.closest('.feature-item').remove();
        }
        function previewImage(input) {
            const preview = document.getElementById('imagePreview');
            const previewImg = document.getElementById('previewImg');
            if (input.files && input.files[0]) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    previewImg.src = e.target.result;
                    preview.style.display = 'block';
                }
                reader.readAsDataURL(input.files[0]);
            } else {
                previewImg.src = '';
                preview.style.display = 'none';
            }
        }
        function removeImage() {
            const preview = document.getElementById('imagePreview');
            const previewImg = document.getElementById('previewImg');
            const inputFile = document.getElementById('productImage');
            inputFile.value = '';
            previewImg.src = '';
            preview.style.display = 'none';
        }

        // Initialize on page load
        document.addEventListener('DOMContentLoaded', function() {
            togglePricingFields();
            toggleStockFields();
        });
    </script> --}}
@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