@extends('backend.template.layouts.template-base')
@section('title', 'Product Management - Edit ' . $product->name)


@section('content')
<div class="page-head-title1 mb-4">
    <a href="{{ route('backend.template.product-list.product-detail', $product->id) }}" 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>Edit {{ $product->name }}
        </h2>
    </a>
</div>

<form id="editProductForm" enctype="multipart/form-data">
    @csrf
    <input type="hidden" name="_method" value="POST">

    {{-- ── Product Info ──────────────────────────────────────────────────── --}}
    <div class="card mb-3">
        <div class="card-header 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" value="{{ old('name', $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" value="{{ old('name_tamil', $product->name_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 }}" {{ $product->group_id == $group->id ? 'selected' : '' }}>
                                    {{ $group->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </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="{{ old('min_order_qty', $product->min_order_qty) }}" 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="{{ old('max_order_qty', $product->max_order_qty) }}" min="0">
                </div>
                <div class="col-xxl-6 col-md-12">
                    <label class="form-label">Product Image</label>
                    @if ($product->image)
                        <div class="mb-2">
                            <img src="{{ asset('storage/' . $product->image) }}" id="previewImage" style="max-height:120px;" alt="Current Image">
                        </div>
                    @else
                        <img src="{{ asset('backend/template/svg-icon/product-img.svg') }}" id="previewImage" style="max-height:80px;" alt="No Image">
                    @endif
                    <input type="file" name="image" id="productImage" class="form-control mt-2" accept=".png,.jpg,.jpeg">
                </div>
                <div class="col-xxl-6 col-md-12">
                    <label class="form-label">Short Description</label>
                    <textarea name="short_description" class="form-control" rows="6">{{ old('short_description', $product->short_description) }}</textarea>
                </div>
                <div class="col-xxl-12 col-md-12">
                    <label class="form-label">Description</label>
                    <textarea id="Descriptioneditor" name="description" class="form-control">{{ old('description', $product->description) }}</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 with comma...">{{ old('keywords', $product->keywords) }}</textarea>
                </div>
                <div class="col-xxl-6 col-md-12">
                    <label class="form-label">Related Products</label>
                    <div class="drop-contain">
                        <select name="related_products[]" class="js-example-basic-multiple" multiple="multiple">
                            @foreach ($products as $p)
                                <option value="{{ $p->id }}" {{ $product->relatedProducts->contains($p->id) ? 'selected' : '' }}>
                                    {{ $p->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- ── Pricing Info ──────────────────────────────────────────────────── --}}
    <div class="card mb-3">
        <div class="card-header d-flex align-items-center 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">Default</th>
                            <th class="p-3">Variant</th>
                            <th class="p-3">Unit</th>
                            <th class="p-3">Label</th>
                            <th class="p-3">MRP <span class="text-danger">*</span></th>
                            <th class="p-3">Discount Type</th>
                            <th class="p-3">Discount Value</th>
                            <th class="p-3">Selling Price</th>
                            <th class="p-3">Status</th>
                            <th class="p-3">Action</th>
                        </tr>
                    </thead>
                    <tbody id="pricingBody">
                        @foreach ($product->pricing as $idx => $price)
                        <tr id="pricingRow_{{ $idx }}">
                            <td class="p-2">
                                <input class="form-check-input" type="radio" name="pricing_default"
                                    value="{{ $idx }}" {{ $price->is_default ? 'checked' : '' }}
                                    onchange="markDefault({{ $idx }})">
                                <input type="hidden" name="pricing[{{ $idx }}][is_default]" value="{{ $price->is_default ? 1 : 0 }}">
                            </td>
                            <td class="p-2">
                                <select name="pricing[{{ $idx }}][variant_id]" class="js-example-basic-single w-100">
                                    <option value="">None</option>
                                    @foreach ($variants as $v)
                                        <option value="{{ $v->id }}" {{ $price->variant_id == $v->id ? 'selected' : '' }}>{{ $v->value }}</option>
                                    @endforeach
                                </select>
                            </td>
                            <td class="p-2">
                                <select name="pricing[{{ $idx }}][unit_id]" class="js-example-basic-single w-100">
                                    <option value="">None</option>
                                    @foreach ($units as $u)
                                        <option value="{{ $u->id }}" {{ $price->unit_id == $u->id ? 'selected' : '' }}>{{ $u->name }} ({{ $u->nickname }})</option>
                                    @endforeach
                                </select>
                            </td>
                            <td class="p-2">
                                <input type="text" name="pricing[{{ $idx }}][label]" class="form-control" value="{{ $price->label }}">
                            </td>
                            <td class="p-2">
                                <input type="number" name="pricing[{{ $idx }}][mrp]" class="form-control mrp-input" value="{{ $price->mrp }}" 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" {{ $price->discount_type === 'none' ? 'selected' : '' }}>None</option>
                                    <option value="percentage" {{ $price->discount_type === 'percentage' ? 'selected' : '' }}>Percentage</option>
                                    <option value="fixed" {{ $price->discount_type === 'fixed' ? 'selected' : '' }}>Fixed</option>
                                </select>
                            </td>
                            <td class="p-2">
                                <input type="number" name="pricing[{{ $idx }}][discount_value]" class="form-control discount-value" value="{{ $price->discount_value }}" step="0.01" min="0" onchange="calcSelling({{ $idx }})">
                            </td>
                            <td class="p-2 selling-price-cell">₹{{ number_format($price->selling_price, 2) }}</td>
                            <td class="p-2">
                                <select name="pricing[{{ $idx }}][status]" class="js-example-basic-single w-100">
                                    <option value="active" {{ $price->status === 'active' ? 'selected' : '' }}>Active</option>
                                    <option value="inactive" {{ $price->status === 'inactive' ? 'selected' : '' }}>Inactive</option>
                                </select>
                            </td>
                            <td class="p-2">
                                <button type="button" class="btn btn-outline-danger btn-icon p-1 btn-sm" onclick="removePricingRow({{ $idx }})">
                                    <i class="ri-subtract-line"></i>
                                </button>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    {{-- ── SEO Settings ──────────────────────────────────────────────────── --}}
    <div class="card mb-3">
        <div class="card-header d-flex align-items-center 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;"
                    {{ ($product->seo && ($product->seo->meta_title || $product->seo->meta_description || $product->seo->schema || $product->seo->h1 || $product->seo->image_alt)) ? 'checked' : '' }}>
            </div>
        </div>
        <div class="card-body" id="productSeoBody"
            style="{{ ($product->seo && ($product->seo->meta_title || $product->seo->meta_description || $product->seo->schema || $product->seo->h1 || $product->seo->image_alt)) ? '' : '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" value="{{ old('seo_image_alt', $product->seo?->image_alt) }}">
                </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" value="{{ old('seo_meta_title', $product->seo?->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" value="{{ old('seo_meta_description', $product->seo?->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" value="{{ old('seo_schema', $product->seo?->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" value="{{ old('seo_h1', $product->seo?->h1) }}">
                </div>
            </div>
        </div>
    </div>

    <div class="d-flex gap-3 align-items-right btn-list mb-3">
        <a href="{{ route('backend.template.product-list.product-detail', $product->id) }}" class="outline-button-green">Cancel</a>
        <button type="button" class="button-green" id="updateProductBtn">Update Product</button>
    </div>
</form>

@endsection

@section('scripts')
<script>
$(function () {
    ClassicEditor.create(document.querySelector('#Descriptioneditor')).catch(console.error);

    var pricingRowIndex = {{ $product->pricing->count() }};

    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 buildRow(idx) {
        return `<tr id="pricingRow_${idx}">
            <td class="p-2">
                <input class="form-check-input" type="radio" name="pricing_default" value="${idx}" onchange="markDefault(${idx})">
                <input type="hidden" name="pricing[${idx}][is_default]" value="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 p-1 btn-sm" onclick="removePricingRow(${idx})">
                    <i class="ri-subtract-line"></i>
                </button>
            </td>
        </tr>`;
    }

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

    window.removePricingRow = function (idx) { $('#pricingRow_' + idx).remove(); };
    window.markDefault = function (idx) {
        $('#pricingBody tr').each(function () {
            var ri = $(this).attr('id').replace('pricingRow_', '');
            $(this).find('[name^="pricing"][name$="[is_default]"]').val(ri == idx ? 1 : 0);
        });
    };
    window.calcSelling = function (idx) {
        var mrp = parseFloat($('[name="pricing[' + idx + '][mrp]"]').val()) || 0;
        var dt  = $('[name="pricing[' + idx + '][discount_type]"]').val();
        var dv  = parseFloat($('[name="pricing[' + idx + '][discount_value]"]').val()) || 0;
        var sp  = dt === 'percentage' ? mrp - mrp * dv / 100 : dt === 'fixed' ? Math.max(0, mrp - dv) : mrp;
        $('#pricingRow_' + idx + ' .selling-price-cell').text('₹' + sp.toFixed(2));
    };

    // Image preview
    $('#productImage').on('change', function () {
        var file = this.files[0];
        if (file) {
            var reader = new FileReader();
            reader.onload = function (e) { $('#previewImage').attr('src', e.target.result); };
            reader.readAsDataURL(file);
        }
    });

    // Validation
    function validateEditForm() {
        var ok = true;

        var $name = $('input[name="name"]');
        if (!$name.val().trim()) {
            $name.addClass('error');
            if (!$name.next('.error-msg').length) $name.after('<small class="error-msg" style="color:#e03137;font-size:12px">Product name is required.</small>');
            ok = false;
        } else { $name.removeClass('error').next('.error-msg').remove(); }

        var $tamil = $('input[name="name_tamil"]');
        if (!$tamil.val().trim()) {
            $tamil.addClass('error');
            if (!$tamil.next('.error-msg').length) $tamil.after('<small class="error-msg" style="color:#e03137;font-size:12px">Tamil / Tanglish name is required.</small>');
            ok = false;
        } else { $tamil.removeClass('error').next('.error-msg').remove(); }

        var $group = $('select[name="group_id"]');
        if (!$group.val()) {
            $group.closest('.drop-contain').addClass('border border-danger rounded');
            if (!$group.closest('.drop-contain').next('.error-msg').length)
                $group.closest('.drop-contain').after('<small class="error-msg" style="color:#e03137;font-size:12px">Group is required.</small>');
            ok = false;
        } else { $group.closest('.drop-contain').removeClass('border border-danger rounded').next('.error-msg').remove(); }

        var hasMrp = false;
        $('.mrp-input').each(function () { if (parseFloat($(this).val()) > 0) hasMrp = true; });
        if (!hasMrp) { toastr.error('At least one pricing row with MRP > 0 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', ''); }
    });

    // Submit
    $('#updateProductBtn').on('click', function () {
        if (!validateEditForm()) return;
        var $btn = $('#updateProductBtn').prop('disabled', true);
        var seoOn = $('#productSeoToggle').is(':checked');
        if (!seoOn) { $('#productSeoBody input').prop('disabled', true); }
        var formData = new FormData(document.getElementById('editProductForm'));
        if (!seoOn) { $('#productSeoBody input').prop('disabled', false); }
        $.ajax({
            url: '{{ route("backend.template.product-list.products.update", $product->id) }}',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
        }).done(function () {
            toastr.success('Product updated successfully.');
            setTimeout(function () {
                window.location.href = '{{ route("backend.template.product-list.product-detail", $product->id) }}';
            }, 800);
        }).fail(function (xhr) {
            $btn.prop('disabled', false);
            $('#productSeoBody input').prop('disabled', false);
            var errors = xhr.responseJSON?.errors;
            if (errors) toastr.error(Object.values(errors).flat().join('<br>'));
            else toastr.error('Update failed.');
        });
    });
});
</script>
@endsection