@extends('backend.template.layouts.template-base')
@section('title', 'Product Management - Create New Product')

@section('content')
<section>
    <div class="page-head-title1 mb-4">
        <div class="d-flex align-items-center justify-content-between create">
            <a href="{{ route('backend.template.product-list.index') }}" class="d-inline-block">
                <h2 class="text-title fw-semibold mb-0 d-flex align-items-center">
                    <i class="ri-arrow-left-s-line fs-1 me-2"></i>Create New Product
                </h2>
            </a>
        </div>
    </div>

    <form id="createProductMainForm" enctype="multipart/form-data">
        @csrf
        <input type="hidden" name="status" id="finalStatus" value="active">

        <div class="row">
            <div class="col-lg-12">

                {{-- ── Product Info ──────────────────────────────────────── --}}
                <div class="card mb-3">
                    <div class="card-header align-items-center d-flex">
                        <h4 class="card-title mb-0 flex-grow-1">Product Info</h4>
                    </div>
                    <div class="card-body">
                        <div class="row gy-4">
                            <div class="col-xxl-4 col-md-6">
                                <label class="form-label">Product Name <span class="text-danger">*</span></label>
                                <input type="text" name="name" class="form-control" placeholder="Enter product name">
                            </div>
                            <div class="col-xxl-4 col-md-6">
                                <label class="form-label">Product Name (Tamil/Tanglish)</label>
                                <input type="text" name="name_tamil" class="form-control" placeholder="Enter product name in Tamil">
                            </div>
                            {{-- <div class="col-xxl-4 col-md-6">
                                <label class="form-label">Group <span class="text-danger">*</span></label>
                                <div class="drop-contain">
                                    <select name="group_id" class="js-example-basic-single">
                                        <option value="">Select Group</option>
                                        @foreach ($groups as $group)
                                            <option value="{{ $group->id }}">{{ $group->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div> --}}
                            <div class="custom-number">
                                    <input type="number" value="0" min="0" id="lowStock">

                                    <div class="number-actions">
                                        <button type="button" class="number-up">▲</button>
                                        <button type="button" class="number-down">▼</button>
                                    </div>
                                </div>

                                <div class="col-xxl-4 col-md-6">
                                <label class="form-label">
                                    Low Stock Threshold <span class="text-danger">*</span>
                                </label>

                                <input type="number" class="counter-input" value="0" min="0">
                            </div>
                            <div class="col-xxl-4 col-md-6">
                                <label class="form-label">Min Order Quantity</label>
                                <input type="number" name="min_order_qty" class="form-control" value="0" min="0">
                            </div>
                            <div class="col-xxl-4 col-md-6">
                                <label class="form-label">Max Order Quantity</label>
                                <input type="number" name="max_order_qty" class="form-control" value="0" min="0">
                            </div>
                            <div class="col-xxl-6 col-md-12">
                                <label class="form-label">Product Image <span class="text-danger">*</span></label>
                                <div class="dropzone" id="productImageDropzone">
                                    <div class="fallback">
                                        <input name="image" type="file" accept=".png,.jpg,.jpeg">
                                    </div>
                                    <div class="dz-message needsclick">
                                        <div class="mb-2">
                                            <img src="{{ asset('backend/template/svg-icon/product-img.svg') }}" alt="Product Image" width="35px">
                                        </div>
                                        <h5>Click to Upload or drag and drop</h5>
                                        <p class="upload-description">PNG, JPG or JPEG. Max 2MB</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xxl-6 col-md-12">
                                <label class="form-label">Short Description</label>
                                <textarea name="short_description" class="form-control" rows="9" placeholder="Type here..."></textarea>
                            </div>
                            <div class="col-xxl-12 col-md-12">
                                <label class="form-label">Description</label>
                                <textarea id="Descriptioneditor" name="description" class="form-control" placeholder="Type here..."></textarea>
                            </div>
                            <div class="col-xxl-6 col-md-12">
                                <label class="form-label">Keywords</label>
                                <textarea name="keywords" class="form-control" rows="4"
                                    placeholder="Separate keywords with comma, space or enter..."></textarea>
                            </div>
                            <div class="col-xxl-6 col-md-12">
                                <label class="form-label">Related Products</label>
                                <div class="drop-contain mb-2">
                                    <select name="related_products[]" class="js-example-basic-multiple" multiple="multiple">
                                        @foreach ($products as $p)
                                            <option value="{{ $p->id }}">{{ $p->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- ── Pricing Info ──────────────────────────────────────── --}}
                <div class="card mb-3">
                    <div class="card-header align-items-center d-flex justify-content-between">
                        <h4 class="card-title mb-0 flex-grow-1">Pricing Info</h4>
                        <button type="button" class="button-green btn-sm px-3" id="addPricingRowBtn">
                            + Add Row
                        </button>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive mt-1 rounded-4">
                            <table class="table align-middle pricing-info-table mb-0" id="pricingTable">
                                <thead class="all-table-head">
                                    <tr class="text-capitalize">
                                        <th class="p-3 table-head-content">Default</th>
                                        <th class="p-3 table-head-content">Variant</th>
                                        <th class="p-3 table-head-content">Unit</th>
                                        <th class="p-3 table-head-content">Label</th>
                                        <th class="p-3 table-head-content">MRP <span class="text-danger">*</span></th>
                                        <th class="p-3 table-head-content">Discount Type</th>
                                        <th class="p-3 table-head-content">Discount Value</th>
                                        <th class="p-3 table-head-content">Selling Price</th>
                                        <th class="p-3 table-head-content">Status</th>
                                        <th class="p-3 table-head-content">Action</th>
                                    </tr>
                                </thead>
                                <tbody id="pricingBody">
                                    {{-- Rows added dynamically --}}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                {{-- ── SEO Settings ──────────────────────────────────────── --}}
                <div class="card mb-3">
                    <div class="card-header align-items-center d-flex justify-content-between">
                        <h4 class="card-title mb-0 flex-grow-1">SEO Settings</h4>
                        <div class="form-check form-switch mb-0">
                            <input class="form-check-input" type="checkbox" id="productSeoToggle" role="switch" style="width:38px;height:20px;cursor:pointer;">
                        </div>
                    </div>
                    <div class="card-body" id="productSeoBody" style="display:none;">
                        <div class="row gy-4">
                            <div class="col-xxl-4 col-md-6">
                                <label class="form-label">Image Alt Text <span class="text-danger">*</span></label>
                                <input type="text" name="seo_image_alt" class="form-control" placeholder="Enter image alt text">
                            </div>
                            <div class="col-xxl-4 col-md-6">
                                <label class="form-label">Meta Title <span class="text-danger">*</span></label>
                                <input type="text" name="seo_meta_title" class="form-control" placeholder="Enter meta title">
                            </div>
                            <div class="col-xxl-4 col-md-6">
                                <label class="form-label">Meta Description <span class="text-danger">*</span></label>
                                <input type="text" name="seo_meta_description" class="form-control" placeholder="Enter meta description">
                            </div>
                            <div class="col-xxl-4 col-md-6">
                                <label class="form-label">Schema <span class="text-danger">*</span></label>
                                <input type="text" name="seo_schema" class="form-control" placeholder="<schema>">
                            </div>
                            <div class="col-xxl-4 col-md-6">
                                <label class="form-label">H1 <span class="text-danger">*</span></label>
                                <input type="text" name="seo_h1" class="form-control" placeholder="Enter H1">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="d-flex gap-3 align-items-right btn-list mb-3">
                    <button type="button" class="shadow-button-green d-lg-block d-none" id="saveDraftBtn">Save as Draft</button>
                    <a href="{{ route('backend.template.product-list.index') }}" class="outline-button-green">Cancel</a>
                    <button type="button" class="button-green" id="openCreateProductModalBtn">
                        Create Product
                    </button>
                </div>

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

    {{-- ── Confirm Create Modal ─────────────────────────────────────────── --}}
    <div id="createProductModal" class="modal fade" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content custom-modal">
                <div class="modal-header custom-header">
                    <h5 class="modal-title1 mt-2">Create New Product?</h5>
                </div>
                <div class="modal-body">
                    <p class="text-muted">Once created, the product will be available for listing and further configuration.</p>
                    <label class="form-label status mt-3">Product Status</label>
                    <div class="d-flex gap-4 mt-2">
                        <div class="form-check custom-radio">
                            <input class="form-check-input" type="radio" name="confirmStatus" id="confirmActive" value="active" checked>
                            <label class="form-check-label" for="confirmActive">Active</label>
                        </div>
                        <div class="form-check custom-radio">
                            <input class="form-check-input" type="radio" name="confirmStatus" id="confirmInactive" value="inactive">
                            <label class="form-check-label" for="confirmInactive">Inactive</label>
                        </div>
                    </div>
                </div>
                <div class="modal-footer custom-footer">
                    <button class="btn-cancel" data-bs-dismiss="modal">Cancel</button>
                    <button class="btn-create" id="confirmCreateProductBtn">Create Product</button>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('scripts')
<script>
$(function () {

    // ── CKEditor ───────────────────────────────────────────────────────────
    ClassicEditor.create(document.querySelector('#Descriptioneditor')).catch(console.error);

    // ── Pricing rows ───────────────────────────────────────────────────────
    var pricingRowIndex = 0;

    var variantOptions = `
        <option value="">None</option>
        @foreach ($variants as $v)
            <option value="{{ $v->id }}">{{ $v->value }}</option>
        @endforeach
    `;
    var unitOptions = `
        <option value="">None</option>
        @foreach ($units as $u)
            <option value="{{ $u->id }}">{{ $u->name }} ({{ $u->nickname }})</option>
        @endforeach
    `;

    function buildPricingRow(idx) {
        return `<tr id="pricingRow_${idx}">
            <td class="p-2">
                <input class="form-check-input" type="radio" name="pricing_default" value="${idx}"
                    ${idx === 0 ? 'checked' : ''} onchange="markDefault(${idx})">
                <input type="hidden" name="pricing[${idx}][is_default]" value="${idx === 0 ? 1 : 0}">
            </td>
            <td class="p-2">
                <select name="pricing[${idx}][variant_id]" class="js-example-basic-single w-100">${variantOptions}</select>
            </td>
            <td class="p-2">
                <select name="pricing[${idx}][unit_id]" class="js-example-basic-single w-100">${unitOptions}</select>
            </td>
            <td class="p-2">
                <input type="text" name="pricing[${idx}][label]" class="form-control" placeholder="Label">
            </td>
            <td class="p-2">
                <input type="number" name="pricing[${idx}][mrp]" class="form-control mrp-input" placeholder="₹0" step="0.01" min="0" onchange="calcSelling(${idx})">
            </td>
            <td class="p-2">
                <select name="pricing[${idx}][discount_type]" class="js-example-basic-single w-100 discount-type" onchange="calcSelling(${idx})">
                    <option value="none">None</option>
                    <option value="percentage">Percentage</option>
                    <option value="fixed">Fixed</option>
                </select>
            </td>
            <td class="p-2">
                <input type="number" name="pricing[${idx}][discount_value]" class="form-control discount-value" placeholder="0" step="0.01" min="0" onchange="calcSelling(${idx})">
            </td>
            <td class="p-2 selling-price-cell">₹0</td>
            <td class="p-2">
                <select name="pricing[${idx}][status]" class="js-example-basic-single w-100">
                    <option value="active">Active</option>
                    <option value="inactive">Inactive</option>
                </select>
            </td>
            <td class="p-2">
                <button type="button" class="btn btn-outline-danger btn-icon waves-effect p-1 btn-sm"
                    onclick="removePricingRow(${idx})"><i class="ri-subtract-line"></i></button>
            </td>
        </tr>`;
    }

    $('#addPricingRowBtn').on('click', function () {
        $('#pricingBody').append(buildPricingRow(pricingRowIndex));
        $('#pricingBody select').each(function () {
            if (!$(this).data('select2')) $(this).select2({ width: '100%' });
        });
        pricingRowIndex++;
    });

    // Add first row on load
    $('#addPricingRowBtn').trigger('click');

    window.removePricingRow = function (idx) {
        $('#pricingRow_' + idx).remove();
    };

    window.markDefault = function (idx) {
        $('#pricingBody tr').each(function () {
            var rowIdx = $(this).attr('id').replace('pricingRow_', '');
            $(this).find('[name^="pricing"][name$="[is_default]"]').val(rowIdx == idx ? 1 : 0);
        });
    };

    window.calcSelling = function (idx) {
        var mrp       = parseFloat($('[name="pricing[' + idx + '][mrp]"]').val()) || 0;
        var discType  = $('[name="pricing[' + idx + '][discount_type]"]').val();
        var discValue = parseFloat($('[name="pricing[' + idx + '][discount_value]"]').val()) || 0;
        var selling   = mrp;
        if (discType === 'percentage') selling = mrp - (mrp * discValue / 100);
        else if (discType === 'fixed') selling = Math.max(0, mrp - discValue);
        $('#pricingRow_' + idx + ' .selling-price-cell').text('₹' + selling.toFixed(2));
    };

    // ── Validation helper ──────────────────────────────────────────────────
    function fieldErr($el, msg) {
        $el.css('border-color', '#e03137');
        if (!$el.next('.v-msg').length) $el.after('<small class="v-msg" style="color:#e03137;font-size:12px;display:block;margin-top:2px">' + msg + '</small>');
    }
    function fieldOk($el) { $el.css('border-color', '').next('.v-msg').remove(); }

    function validateProductForm() {
        var ok = true;

        var $name = $('input[name="name"]');
        if (!$name.val().trim()) { fieldErr($name, 'Product name is required.'); ok = false; }
        else { fieldOk($name); }

        var $tamil = $('input[name="name_tamil"]');
        if (!$tamil.val().trim()) { fieldErr($tamil, 'Tamil / Tanglish name is required.'); ok = false; }
        else { fieldOk($tamil); }

        var $group = $('select[name="group_id"]');
        if (!$group.val()) {
            $group.closest('.drop-contain').css({'outline': '2px solid #e03137', 'border-radius': '6px'});
            if (!$group.closest('.drop-contain').next('.v-msg').length)
                $group.closest('.drop-contain').after('<small class="v-msg" style="color:#e03137;font-size:12px;display:block;margin-top:2px">Group is required.</small>');
            ok = false;
        } else {
            $group.closest('.drop-contain').css('outline', '').next('.v-msg').remove();
        }

        var hasPricing = false;
        $('#pricingBody tr').each(function () {
            if (parseFloat($(this).find('.mrp-input').val()) > 0) hasPricing = true;
        });
        if (!hasPricing) { toastr.error('At least one pricing row with MRP is required.'); ok = false; }

        if ($('#productSeoToggle').is(':checked')) {
            $('#productSeoBody input').each(function () {
                if (!$(this).val().trim()) { $(this).css('border-color', '#e03137'); ok = false; }
                else { $(this).css('border-color', ''); }
            });
        }

        if (!ok) toastr.error('Please fill in all required fields.');
        return ok;
    }

    $('#productSeoToggle').on('change', function () {
        $(this).is(':checked') ? $('#productSeoBody').slideDown(200) : $('#productSeoBody').slideUp(200);
        if (!$(this).is(':checked')) { $('#productSeoBody input').css('border-color', ''); }
    });

    // ── Confirm Create ─────────────────────────────────────────────────────
    $('#saveDraftBtn').on('click', function () {
        if (!validateProductForm()) return;
        $('#finalStatus').val('draft');
        submitForm();
    });

    $('#openCreateProductModalBtn').on('click', function () {
        if (!validateProductForm()) return;
        $('#createProductModal').modal('show');
    });

    $('#confirmCreateProductBtn').on('click', function () {
        $('#finalStatus').val($('[name=confirmStatus]:checked').val());
        $('#createProductModal').modal('hide');
        submitForm();
    });

    function submitForm() {
        var form = document.getElementById('createProductMainForm');
        var seoOn = $('#productSeoToggle').is(':checked');
        if (!seoOn) { $('#productSeoBody input').prop('disabled', true); }
        var formData = new FormData(form);
        if (!seoOn) { $('#productSeoBody input').prop('disabled', false); }

        // Append CKEditor content
        if (typeof ClassicEditor !== 'undefined') {
            var editorData = document.querySelector('#Descriptioneditor')._ckEditor?.getData() || '';
            formData.set('description', editorData);
        }

        $.ajax({
            url: '{{ route("backend.template.product-list.products.store") }}',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
        }).done(function (res) {
            toastr.success(res.message || 'Product created successfully.');
            setTimeout(function () {
                window.location.href = '{{ route("backend.template.product-list.index") }}';
            }, 800);
        }).fail(function (xhr) {
            var errors = xhr.responseJSON?.errors;
            if (errors) {
                var msg = Object.values(errors).flat().join('<br>');
                toastr.error(msg);
            } else {
                toastr.error(xhr.responseJSON?.message || 'Failed to create product.');
            }
        });
    }
});
</script>

<script>
        $(document).ready(function () {
            const input = $('#lowStock');
            $('.number-up').on('click', function () {
                input[0].stepUp();
            });
            $('.number-down').on('click', function () {
                if (Number(input.val()) > Number(input.attr('min'))) {
                    input[0].stepDown();
                }
            });
        });
    </script>
@endsection