@extends('layouts.app')

@section('content')
    <div class="app-content pt-0">
        <div class="container-fluid pt-0">
            <div class="row">
                <div class="col-12">
                    <div class="card shadow-sm border-0">
                        <div class="card-header bg-white py-3 d-flex align-items-center border-bottom-0 px-4">
                            <h5 class="mb-0 fw-bold flex-grow-1">Create New Product</h5>
                            <div class="text-muted extra-small ms-auto">Step 1: General Product Information</div>
                        </div>
                        <div class="card-header p-0">
                            <ul class="nav nav-tabs border-0" id="createProductTab" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link active" data-bs-toggle="tab" href="#general" role="tab">
                                        <i class="bi bi-info-circle me-1"></i> General Information
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">
                                        <i class="bi bi-gear me-1"></i> Specifications
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">
                                        <i class="bi bi-layers me-1"></i> Variations
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">
                                        <i class="bi bi-gift me-1"></i> Free Items
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">
                                        <i class="bi bi-patch-question me-1"></i> FAQs
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">
                                        <i class="bi bi-images me-1"></i> Media
                                    </a>
                                </li>
                            </ul>
                        </div>

                        <form action="{{ route('admin.products.store') }}" method="POST" enctype="multipart/form-data" id="productForm">
                            @csrf
                            <div class="card-body p-4">
                                <div class="tab-content">
                                    <div class="tab-pane fade show active" id="general">
                                        
                                        <!-- Basic Info Section -->
                                        <div class="row mb-5">
                                            <div class="col-md-12 mb-4 border-bottom pb-2">
                                                <h5 class="fw-bold text-primary mb-0">Step 1: Core Details</h5>
                                            </div>
                                            <div class="col-md-8">
                                                <div class="mb-3">
                                                    <label class="form-label">Product Name *</label>
                                                    <input type="text" name="name" class="form-control" value="{{ old('name') }}" placeholder="e.g. iPhone 15 Pro Max" required>
                                                </div>
                                                <div class="row g-3">
                                                    <div class="col-md-6">
                                                        <label class="form-label">Category *</label>
                                                        <select name="category_id" id="category_id" class="form-select select2" required>
                                                            <option value="">Select Category</option>
                                                            @foreach($categories as $category)
                                                                <option value="{{ $category->id }}" {{ old('category_id') == $category->id ? 'selected' : '' }}>{{ $category->name }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <label class="form-label">Subcategory</label>
                                                        <select name="subcategory_id" id="subcategory_id" class="form-select select2">
                                                            <option value="">Select Subcategory</option>
                                                        </select>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <label class="form-label">Brand</label>
                                                        <select name="brand_id" id="brand_id" class="form-select select2">
                                                            <option value="">Select Brand</option>
                                                            @foreach($brands as $brand)
                                                                <option value="{{ $brand->id }}" {{ old('brand_id') == $brand->id ? 'selected' : '' }}>{{ $brand->name }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <label class="form-label text-primary fw-bold"><i class="bi bi-palette me-2"></i>Colors Available</label>
                                                        <select name="colors[]" id="product_colors" class="form-select select2" multiple data-placeholder="Choose available colors">
                                                            @foreach($colors as $color)
                                                                <option value="{{ $color->id }}" {{ in_array($color->id, old('colors', [])) ? 'selected' : '' }}>{{ $color->name }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="p-3 bg-light rounded-4 border">
                                                    <label class="form-label d-block border-bottom pb-2 mb-3">Product Settings</label>
                                                    <div class="form-check form-switch custom-switch mb-3">
                                                        <input class="form-check-input" type="checkbox" name="is_active" id="is_active" value="1" {{ old('is_active', true) ? 'checked' : '' }}>
                                                        <label class="form-check-label ms-2 fw-semibold" for="is_active">Publicly Visible</label>
                                                    </div>
                                                    <div class="space-y-2">
                                                        <div class="p-2 border rounded bg-white mb-2">
                                                            <div class="form-check">
                                                                <input type="checkbox" name="is_new" id="is_new" class="form-check-input" value="1" {{ old('is_new') ? 'checked' : '' }}>
                                                                <label class="form-check-label small" for="is_new">New Arrival</label>
                                                            </div>
                                                        </div>
                                                        <div class="p-2 border rounded bg-white mb-2">
                                                            <div class="form-check">
                                                                <input type="checkbox" name="is_featured" id="is_featured" class="form-check-input" value="1" {{ old('is_featured') ? 'checked' : '' }}>
                                                                <label class="form-check-label small" for="is_featured">Featured Product</label>
                                                            </div>
                                                        </div>
                                                        <div class="p-2 border rounded bg-white">
                                                            <div class="form-check">
                                                                <input type="checkbox" name="is_coming_soon" id="is_coming_soon" class="form-check-input" value="1" {{ old('is_coming_soon') ? 'checked' : '' }}>
                                                                <label class="form-check-label small" for="is_coming_soon">Coming Soon</label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- Pricing & Inventory Section -->
                                        <div class="row mb-5">
                                            <div class="col-md-12 mb-4 border-bottom pb-2">
                                                <h5 class="fw-bold text-success mb-0">Step 2: Pricing & Inventory</h5>
                                            </div>
                                            <div class="col-md-2">
                                                <label class="form-label">Base Price ($) *</label>
                                                <input type="number" step="0.01" name="price" id="price" class="form-control" value="{{ old('price', 0) }}" required>
                                            </div>
                                            <div class="col-md-2">
                                                <label class="form-label">Discount %</label>
                                                <input type="number" step="0.01" name="discount_percentage" id="discount_percentage" class="form-control" value="{{ old('discount_percentage', 0) }}">
                                            </div>
                                            <div class="col-md-2">
                                                <label class="form-label">Disc. Amount</label>
                                                <input type="number" step="0.01" id="discount_amount" class="form-control" value="0">
                                            </div>
                                            <div class="col-md-2">
                                                <label class="form-label">Initial Stock *</label>
                                                <input type="number" name="available_qty" class="form-control" value="{{ old('available_qty', 0) }}" required>
                                            </div>
                                            <div class="col-md-2">
                                                <label class="form-label">Stock Warning at</label>
                                                <input type="number" name="stock_threshold_qty" class="form-control" value="{{ old('stock_threshold_qty', 5) }}">
                                            </div>
                                            <div class="col-md-2 mt-3">
                                                <label class="form-label">Bonus Points %</label>
                                                <input type="number" step="0.01" name="bonus_percentage" id="bonus_percentage" class="form-control" value="{{ old('bonus_percentage', 0) }}">
                                            </div>
                                        </div>

                                        <!-- SEO & Description -->
                                        <div class="row">
                                            <div class="col-md-12 mb-4 border-bottom pb-2">
                                                <h5 class="fw-bold text-info mb-0">Step 3: Marketing & SEO</h5>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="mb-4">
                                                    <label class="form-label">Search Keywords</label>
                                                    <select name="tags[]" class="form-control select2-tags-field" multiple="multiple">
                                                        @if(old('tags')) @foreach(old('tags') as $tag) <option value="{{ $tag }}" selected>{{ $tag }}</option> @endforeach @endif
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label class="form-label">Marketing Description</label>
                                                    <textarea name="description" rows="4" class="form-control">{{ old('description') }}</textarea>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                            
                            <div class="card-footer bg-white p-4 text-end">
                                <button type="submit" class="btn btn-primary btn-lg px-5 shadow-sm rounded-pill">
                                    Save & Continue to Details <i class="bi bi-arrow-right ms-1"></i>
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
    $(function() {
        const categoriesData = @json($categories->map->only(['id', 'bonus_percentage']));
        $('#category_id').on('change', function() {
            const categoryId = $(this).val();
            const cat = categoriesData.find(c => c.id == categoryId);
            if(cat && cat.bonus_percentage !== undefined && cat.bonus_percentage !== null) {
                $('#bonus_percentage').val(cat.bonus_percentage);
            }
            const $sub = $('#subcategory_id');
            $sub.html('<option value="">Loading...</option>');
            if (!categoryId) { $sub.html('<option value="">Select Subcategory</option>'); return; }
            $.getJSON(`/admin/get-subcategories/${categoryId}`, function(res) {
                $sub.html('<option value="">Select Subcategory</option>');
                if (res.status && res.data) {
                    res.data.forEach(sub => $sub.append(`<option value="${sub.id}">${sub.name}</option>`));
                }
            });
        });

        if (typeof $.fn.select2 !== 'undefined') {
            $('.select2-tags-field').select2({
                theme: 'bootstrap-5', width: '100%', placeholder: 'Type and enter...', tags: true, tokenSeparators: [',', ' ']
            });
        }

        function updateDiscountFromPercentage() {
            const price = parseFloat($('#price').val()) || 0;
            const percentage = parseFloat($('#discount_percentage').val()) || 0;
            if (price > 0) {
                const amount = price * (percentage / 100);
                $('#discount_amount').val(amount.toFixed(2));
            }
        }
        function updateDiscountFromAmount() {
            const price = parseFloat($('#price').val()) || 0;
            const amount = parseFloat($('#discount_amount').val()) || 0;
            if (price > 0) {
                const percentage = (amount / price) * 100;
                $('#discount_percentage').val(percentage.toFixed(2));
            }
        }

        $('#price, #discount_percentage').on('keyup change', updateDiscountFromPercentage);
        $('#discount_amount').on('keyup change', updateDiscountFromAmount);
    });
</script>
@endpush