@extends('layouts.app')

@section('title', 'Create New Product')

@section('actions')
<a href="{{ route('products.index') }}" class="btn btn-secondary">
    <i class="fas fa-arrow-left"></i> Back to Products
</a>
@endsection

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-plus-circle me-2 text-primary"></i>Create New Product</h5>
                </div>

                @if(session('error'))
                <div class="alert alert-danger m-3">
                    <i class="fas fa-exclamation-circle me-2"></i> {{ session('error') }}
                </div>
                @endif

                @if($errors->any())
                <div class="alert alert-danger m-3">
                    <ul class="mb-0">
                        @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
                @endif

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

                        <div class="row">
                            <!-- Left Column -->
                            <div class="col-md-8">
                                <!-- Basic Information -->
                                <div class="card mb-3">
                                    <div class="card-header bg-light">
                                        <h6 class="mb-0"><i class="fas fa-info-circle me-2"></i>Basic Information</h6>
                                    </div>
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-md-6 mb-3">
                                                <label for="name" class="form-label">Product Name <span class="text-danger">*</span></label>
                                                <input type="text" name="name" id="name" 
                                                       class="form-control @error('name') is-invalid @enderror" 
                                                       value="{{ old('name') }}" required>
                                                @error('name')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>

                                            <div class="col-md-6 mb-3">
                                                <label for="code" class="form-label">Product Code <span class="text-danger">*</span></label>
                                                <input type="text" name="code" id="code" 
                                                       class="form-control @error('code') is-invalid @enderror" 
                                                       value="{{ old('code') }}" required>
                                                @error('code')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>

                                            <div class="col-md-6 mb-3">
                                                <label for="model" class="form-label">Model</label>
                                                <input type="text" name="model" id="model" 
                                                       class="form-control @error('model') is-invalid @enderror" 
                                                       value="{{ old('model') }}">
                                                @error('model')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>

                                            <div class="col-md-6 mb-3">
                                                <label for="brand" class="form-label">Brand</label>
                                                <input type="text" name="brand" id="brand" 
                                                       class="form-control @error('brand') is-invalid @enderror" 
                                                       value="{{ old('brand') }}">
                                                @error('brand')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>

                                            <div class="col-md-12 mb-3">
                                                <label for="description" class="form-label">Description</label>
                                                <textarea name="description" id="description" 
                                                          class="form-control @error('description') is-invalid @enderror" 
                                                          rows="3">{{ old('description') }}</textarea>
                                                @error('description')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Pricing Information -->
                                <div class="card mb-3">
                                    <div class="card-header bg-light">
                                        <h6 class="mb-0"><i class="fas fa-tag me-2"></i>Pricing Information</h6>
                                    </div>
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-md-6 mb-3">
                                                <label for="purchase_price" class="form-label">Purchase Price (৳)</label>
                                                <input type="number" name="purchase_price" id="purchase_price" 
                                                       class="form-control @error('purchase_price') is-invalid @enderror" 
                                                       value="{{ old('purchase_price', 0) }}" step="0.01" min="0">
                                                @error('purchase_price')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>

                                            <div class="col-md-6 mb-3">
                                                <label for="selling_price" class="form-label">Selling Price (৳) <span class="text-danger">*</span></label>
                                                <input type="number" name="selling_price" id="selling_price" 
                                                       class="form-control @error('selling_price') is-invalid @enderror" 
                                                       value="{{ old('selling_price', 0) }}" step="0.01" min="0" required>
                                                @error('selling_price')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>

                                            <div class="col-md-6 mb-3">
                                                <label for="installment_price" class="form-label">Installment Price (৳)</label>
                                                <input type="number" name="installment_price" id="installment_price" 
                                                       class="form-control @error('installment_price') is-invalid @enderror" 
                                                       value="{{ old('installment_price', 0) }}" step="0.01" min="0">
                                                @error('installment_price')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>

                                            <div class="col-md-6 mb-3">
                                                <label for="tax_rate" class="form-label">Tax Rate (%)</label>
                                                <input type="number" name="tax_rate" id="tax_rate" 
                                                       class="form-control @error('tax_rate') is-invalid @enderror" 
                                                       value="{{ old('tax_rate', 0) }}" step="0.01" min="0" max="100">
                                                @error('tax_rate')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Stock Information -->
                                <div class="card mb-3">
                                    <div class="card-header bg-light">
                                        <h6 class="mb-0"><i class="fas fa-boxes me-2"></i>Stock Information</h6>
                                    </div>
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-md-4 mb-3">
                                                <label for="stock_quantity" class="form-label">Stock Quantity <span class="text-danger">*</span></label>
                                                <input type="number" name="stock_quantity" id="stock_quantity" 
                                                       class="form-control @error('stock_quantity') is-invalid @enderror" 
                                                       value="{{ old('stock_quantity', 0) }}" min="0" required>
                                                @error('stock_quantity')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>

                                            <div class="col-md-4 mb-3">
                                                <label for="minimum_stock" class="form-label">Minimum Stock</label>
                                                <input type="number" name="minimum_stock" id="minimum_stock" 
                                                       class="form-control @error('minimum_stock') is-invalid @enderror" 
                                                       value="{{ old('minimum_stock', 5) }}" min="0">
                                                @error('minimum_stock')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>

                                            <div class="col-md-4 mb-3">
                                                <label for="warranty_period" class="form-label">Warranty (Months)</label>
                                                <input type="number" name="warranty_period" id="warranty_period" 
                                                       class="form-control @error('warranty_period') is-invalid @enderror" 
                                                       value="{{ old('warranty_period', 12) }}" min="0">
                                                @error('warranty_period')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Right Column -->
                            <div class="col-md-4">
                                <!-- Category -->
                                <div class="card mb-3">
                                    <div class="card-header bg-light">
                                        <h6 class="mb-0"><i class="fas fa-folder me-2"></i>Category</h6>
                                    </div>
                                    <div class="card-body">
                                        <div class="mb-3">
                                            <label for="category_id" class="form-label">Category <span class="text-danger">*</span></label>
                                            <select name="category_id" id="category_id" 
                                                    class="form-select @error('category_id') is-invalid @enderror" 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>
                                            @error('category_id')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>

                                <!-- Status -->
                                <div class="card mb-3">
                                    <div class="card-header bg-light">
                                        <h6 class="mb-0"><i class="fas fa-toggle-on me-2"></i>Status</h6>
                                    </div>
                                    <div class="card-body">
                                        <div class="mb-3">
                                            <div class="form-check form-switch">
                                                <input type="checkbox" name="is_active" id="is_active" 
                                                       class="form-check-input" value="1" {{ old('is_active', 1) ? 'checked' : '' }}>
                                                <label class="form-check-label" for="is_active">Active</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Image -->
                                <div class="card mb-3">
                                    <div class="card-header bg-light">
                                        <h6 class="mb-0"><i class="fas fa-image me-2"></i>Product Image</h6>
                                    </div>
                                    <div class="card-body">
                                        <div class="mb-3">
                                            <label for="image" class="form-label">Upload Image</label>
                                            <input type="file" name="image" id="image" 
                                                   class="form-control @error('image') is-invalid @enderror" 
                                                   accept="image/*">
                                            <small class="text-muted">Max size: 2MB. Allowed: jpeg, png, jpg, gif</small>
                                            @error('image')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                        <div id="image-preview" class="text-center mt-2" style="display: none;">
                                            <img src="#" alt="Preview" class="img-fluid rounded" style="max-height: 150px;">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="text-center mt-4">
                            <button type="submit" class="btn btn-primary px-5">
                                <i class="fas fa-save me-2"></i>Create Product
                            </button>
                            <button type="reset" class="btn btn-secondary px-5 ms-2">
                                <i class="fas fa-redo me-2"></i>Reset
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
$(document).ready(function() {
    // Image preview
    $('#image').change(function() {
        const file = this.files[0];
        if (file) {
            let reader = new FileReader();
            reader.onload = function(event) {
                $('#image-preview').show();
                $('#image-preview img').attr('src', event.target.result);
            }
            reader.readAsDataURL(file);
        } else {
            $('#image-preview').hide();
        }
    });

    // Calculate installment price based on selling price (optional)
    $('#selling_price').on('input', function() {
        let sellingPrice = parseFloat($(this).val()) || 0;
        let installmentPrice = $('#installment_price').val();
        
        // Only auto-fill if installment price is empty or zero
        if (!installmentPrice || parseFloat(installmentPrice) === 0) {
            // You can add markup logic here, e.g., +10%
            let suggestedPrice = sellingPrice * 1.10;
            $('#installment_price').val(suggestedPrice.toFixed(2));
        }
    });
});
</script>
@endsection