@extends('layouts.app')

@section('title', 'Create Product - Quick OMS')

@section('content')
@push('css')
<style>
    .createDraftInvoice select, .createDraftInvoice input { height: auto !important; }
</style>
@endpush
<div class="welcome">
    <h3>Create Product</h3>
</div>

<form action="{{ route('admin.inventory.store') }}" method="POST" enctype="multipart/form-data">
    @csrf
    <div class="createDraftInvoice">
        <div class="create_inventory">

            <!-- UPLOAD -->
            <label class="upload-box" style="cursor:pointer;">
                <input type="file" name="image" id="imageInput" hidden accept="image/*">
                <div class="upload-icon" id="uploadPlaceholder">
                    <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M20.869 10.824H10.824V20.91H10.004V10.824H0V10.086H10.004V0H10.824V10.086H20.869V10.824Z" fill="#9B9B9B" />
                    </svg>
                </div>
                <img id="imagePreview" src="" style="display:none; width: 100%; height: 100%; object-fit: cover;">
            </label>
            <div class="upload_txt">Upload Image</div>

            <!-- CLASSIFICATION -->
            <div class="classification">
                <div class="section-title">Classification</div>

                <div class="grid">

                    <div class="field full">
                        <label>Select Category</label>
                        <div class="row">
                            <select name="category_id" id="category_id" required>
                                <option value="">Select Category</option>
                                @foreach($categories as $id => $name)
                                    <option value="{{ $id }}">{{ $name }}</option>
                                @endforeach
                            </select>
                            <button type="button" class="add-btn" data-toggle="modal" data-target="#addCategoryModal">+ Add Category</button>
                        </div>
                    </div>

                    <div class="field full">
                        <label>Select Subcategory</label>
                        <div class="row">
                            <select name="subcategory_id" id="subcategory_id">
                                <option value="">Select Subcategory</option>
                            </select>
                            <button type="button" class="add-btn" id="addSubcategoryBtn">+ Add Subcategory</button>
                        </div>
                    </div>

                    <div class="field full">
                        <label>Select Brand</label>
                        <div class="row">
                            <select name="brand_id" id="brand_id">
                                <option value="">Select Brand</option>
                                @foreach($brands as $id => $name)
                                    <option value="{{ $id }}">{{ $name }}</option>
                                @endforeach
                            </select>
                            <button type="button" class="add-btn" data-toggle="modal" data-target="#addBrandModal">+ Add Brand</button>
                        </div>
                    </div>
                </div>
                <div class="sku_div">
                    <div class="grid">
                        <div class="field">
                            <label>SKU</label>
                            <input type="text" name="sku" required value="{{ old('sku') }}">
                        </div>

                        <div class="field">
                            <label>Product Name</label>
                            <input type="text" name="name" required value="{{ old('name') }}">
                        </div>

                        <div class="field full">
                            <label>Description</label>
                            <textarea name="description">{{ old('description') }}</textarea>
                        </div>
                    </div>
                </div>
            </div>

            <!-- PACKAGING -->
            <div class="blue">
                <div class="section-title">Packaging & Unit Details</div>
                <div class="grid">
                    <div class="field">
                        <label>Unit of Measure</label>
                        <select name="uom_id">
                            <option value="">Select UOM</option>
                            @foreach($uoms as $id => $name)
                                <option value="{{ $id }}">{{ $name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="field">
                        <label>Pack Size</label>
                        <input type="text" name="pack_size" value="{{ old('pack_size') }}">
                    </div>
                    <div class="field">
                        <label>HSN Code</label>
                        <input type="text" name="hsn_code" value="{{ old('hsn_code') }}">
                    </div>
                </div>
            </div>

            <!-- PRICING -->
            <div class="pricing">
                <div class="section-title" style="margin-top:16px;">Pricing</div>

                <div class="grid">
                    <div class="field">
                        <label>Unit Price</label>
                        <input type="number" name="unit_price" id="unit_price" step="0.01" required value="{{ old('unit_price') }}">
                    </div>
                    <div class="field">
                        <label>Sales Price (Ex. GST)</label>
                        <input type="number" name="sale_price_ex_gst" id="sale_price_ex_gst" step="0.01" required value="{{ old('sale_price_ex_gst') }}">
                    </div>
                    <div class="field">
                        <label>Select Tax</label>
                        <select name="tax_id" id="tax_id" required>
                            <option value="">Select Tax</option>
                            @foreach($taxes as $tax)
                                <option value="{{ $tax->id }}" data-rate="{{ $tax->rate }}">{{ $tax->name }} ({{ $tax->rate }}%)</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="field">
                        <label>Sales Price (Inc. GST)</label>
                        <input type="number" name="sale_price_inc_gst" id="sale_price_inc_gst" step="0.01" required value="{{ old('sale_price_inc_gst') }}">
                    </div>
                </div>
            </div>

            <!-- STOCK -->
            <div class="green">
                <div class="section-title">Stock Information</div>
                <div class="grid">
                    <div class="field">
                        <label>Quantity Unit</label>
                        <select name="quantity_unit">
                            <option value="Unit">Unit</option>
                            <option value="Carton">Carton</option>
                        </select>
                    </div>
                    <div class="field">
                        <label>Quantity</label>
                        <input type="number" name="quantity" required value="{{ old('quantity', 0) }}">
                    </div>
                    <div class="field full">
                        <label>Sort Order</label>
                        <input type="number" name="sort_order" value="{{ old('sort_order', 0) }}">
                    </div>
                </div>
            </div>

            <!-- CUSTOM CHECKBOX -->
            <div class="check-group">
                <label class="custom-check">
                    <input type="checkbox" name="has_promotion" value="1" {{ old('has_promotion') ? 'checked' : '' }}>
                    <span class="checkmark"></span>
                    <span>This product may have bulk promotions</span>
                </label>

                <label class="custom-check">
                    <input type="checkbox" name="is_new" value="1" {{ old('is_new', 1) ? 'checked' : '' }}>
                    <span class="checkmark"></span>
                    <span>This is a new product</span>
                </label>
            </div>

            <!-- BUTTONS -->
            <div class="footer">
                <button type="submit" class="save">Save Product</button>
                <button type="button" class="discard" onclick="window.history.back()">Discard</button>
            </div>

        </div>
    </div>
</form>

<!-- MODALS -->
<!-- Add Category Modal -->
<div class="modal fade" id="addCategoryModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add Category</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>
            <form id="ajaxAddCategoryForm">
                @csrf
                <div class="modal-body">
                    <div class="field">
                        <label>Category Name</label>
                        <input type="text" name="name" class="form-control" style="width:100%; padding:8px; margin-top:5px; border:1px solid #ddd; border-radius:4px;" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Add Subcategory Modal -->
<div class="modal fade" id="addSubcategoryModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add Subcategory</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>
            <form id="ajaxAddSubcategoryForm">
                @csrf
                <div class="modal-body">
                    <div class="field">
                        <label>Select Category</label>
                        <select name="category_id" id="modal_category_id" class="form-control" style="width:100%; padding:8px; margin-top:5px; border:1px solid #ddd; border-radius:4px;" required>
                            <option value="">Select Category</option>
                            @foreach($categories as $id => $name)
                                <option value="{{ $id }}">{{ $name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="field" style="margin-top:10px;">
                        <label>Subcategory Name</label>
                        <input type="text" name="name" class="form-control" style="width:100%; padding:8px; margin-top:5px; border:1px solid #ddd; border-radius:4px;" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Add Brand Modal -->
<div class="modal fade" id="addBrandModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add Brand</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>
            <form id="ajaxAddBrandForm">
                @csrf
                <div class="modal-body">
                    <div class="field">
                        <label>Brand Name</label>
                        <input type="text" name="name" class="form-control" style="width:100%; padding:8px; margin-top:5px; border:1px solid #ddd; border-radius:4px;" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script>
$(document).ready(function() {
    const categorySelect = $('#category_id');
    const subcategorySelect = $('#subcategory_id');
    const brandSelect = $('#brand_id');

    // Image Preview
    $('#imageInput').change(function() {
        const file = this.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                $('#imagePreview').attr('src', e.target.result).show();
                $('#uploadPlaceholder').hide();
            }
            reader.readAsDataURL(file);
        }
    });

    // Dynamic Subcategories
    categorySelect.on('change', function() {
        const categoryId = this.value;
        subcategorySelect.html('<option value="">Select Subcategory</option>');
        
        if (!categoryId) return;

        fetch(`{{ route('admin.inventory.get-subcategories') }}?category_id=${categoryId}`)
            .then(res => res.json())
            .then(data => {
                data.forEach(sub => {
                    subcategorySelect.append(new Option(sub.name, sub.id));
                });
            });
    });

    // AJAX Add Category
    $('#ajaxAddCategoryForm').submit(function(e) {
        e.preventDefault();
        $.post("{{ route('admin.categories.store') }}", $(this).serialize(), function(res) {
            if (res.success) {
                categorySelect.append(new Option(res.data.name, res.data.id, true, true)).trigger('change');
                $('#addCategoryModal').modal('hide');
                $('#ajaxAddCategoryForm')[0].reset();
            } else { alert(res.message); }
        });
    });

    // AJAX Add Subcategory
    $('#addSubcategoryBtn').click(function() {
        const catId = categorySelect.val();
        $('#modal_category_id').val(catId);
        $('#addSubcategoryModal').modal('show');
    });

    $('#ajaxAddSubcategoryForm').submit(function(e) {
        e.preventDefault();
        const formData = $(this).serialize();
        $.post("{{ route('admin.subcategories.store') }}", formData, function(res) {
            if (res.success) {
                // If the added subcategory belongs to the currently selected category, add it to the dropdown
                if (res.data.category_id == categorySelect.val()) {
                    subcategorySelect.append(new Option(res.data.name, res.data.id, true, true));
                }
                $('#addSubcategoryModal').modal('hide');
                $('#ajaxAddSubcategoryForm')[0].reset();
            } else { alert(res.message); }
        });
    });

    // AJAX Add Brand
    // AJAX Add Brand
    $('#ajaxAddBrandForm').submit(function(e) {
        e.preventDefault();
        $.post("{{ route('admin.brands.store') }}", $(this).serialize(), function(res) {
            if (res.success) {
                brandSelect.append(new Option(res.data.name, res.data.id, true, true));
                $('#addBrandModal').modal('hide');
                $('#ajaxAddBrandForm')[0].reset();
            } else { alert(res.message); }
        });
    });

    // 4. Pricing Logic
    const unitPriceInput = $('#unit_price');
    const saleExInput = $('#sale_price_ex_gst');
    const saleIncInput = $('#sale_price_inc_gst');
    const taxSelect = $('#tax_id');

    function calculatePrices(fromEx = true) {
        const taxRate = parseFloat(taxSelect.find(':selected').data('rate')) || 0;
        
        if (fromEx) {
            const exPrice = parseFloat(saleExInput.val()) || 0;
            const incPrice = exPrice + (exPrice * taxRate / 100);
            saleIncInput.val(incPrice.toFixed(2));
        } else {
            const incPrice = parseFloat(saleIncInput.val()) || 0;
            const exPrice = incPrice / (1 + (taxRate / 100));
            saleExInput.val(exPrice.toFixed(2));
        }
    }

    unitPriceInput.on('input', function() {
        if (!saleExInput.val() || saleExInput.val() == 0) {
            saleExInput.val($(this).val());
            calculatePrices(true);
        }
    });

    saleExInput.on('input', () => calculatePrices(true));
    saleIncInput.on('input', () => calculatePrices(false));
    taxSelect.on('change', () => calculatePrices(true));
});
</script>
@endpush
@endsection