@extends('Admin.layout')
@section('content')
<style>
    /* --- Labels and Inputs --- */
    .form-label {
        font-weight: 500;
        color: #4b5563;
        margin-bottom: 8px;
        font-size: 14px;
    }

    .form-control,
    .form-select {
        border-radius: 6px;
        border: 1px solid #d1d5db;
        padding: 0.6rem 0.8rem;
        font-size: 14px;
    }

    textarea.form-control {
        height: 90px;
        resize: none;
    }

    /* --- Image Upload --- */
    .upload-container {
        border: 2px dashed #cbd5e1;
        border-radius: 12px;
        background: #fdfdfd;
        min-height: 250px;
        padding: 15px;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-content: flex-start;
    }

    .image-preview-wrapper {
        position: relative;
        width: 100px;
        height: 100px;
        border-radius: 8px;
        border: 1px solid #e2e8f0;
    }

    .image-preview-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 7px;
    }

    .remove-img-btn {
        position: absolute;
        top: -5px;
        bottom: 30px;
        right: -5px;
        background: #ff4d4d;
        color: white;
        border: none;
        border-radius: 50%;
        width: 20px;
        height: 20px;
        font-size: 12px;
        cursor: pointer;
        z-index: 10;
    }

    .add-image-box {
        width: 100px;
        height: 100px;
        border: 2px dashed #0056b3;
        border-radius: 8px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: #0056b3;
        transition: 0.3s;
        background: #f0f7ff;
    }

    .add-image-box:hover {
        background: #e0eeff;
    }

    .unit-flex-container {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .unit-input-row {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        margin-bottom: 15px;
        width: 100%;
        align-items: flex-start;
    }

    .col-val,
    .col-unit,
    .col-mrp,
    .col-price,
    .col-stock,
    .col-display,
    .col-action {
        display: flex;
        flex-direction: column;
    }

    .col-val {
        flex: 1.5;
    }

    .col-unit {
        flex: 1.2;
    }

    .col-mrp {
        flex: 1.2;
    }

    .col-price {
        flex: 1.2;
    }

    .col-stock {
        flex: 1;
    }

    .col-display {
        flex: 1.2;
    }

    .col-action {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-top: 0;
    }

    .col-action .btn-remove {
        margin-top: 24px;
    }

    /* --- Buttons --- */
    .btn-remove {
        background-color: #ff4d4d;
        color: white;
        border: none;
        border-radius: 6px;
        height: 42px;
        width: 100%;
    }

    .btn-add-more {
        background-color: #0056b3;
        color: white;
        padding: 8px 20px;
        border-radius: 6px;
        border: none;
        font-weight: 500;
    }

    .btn-update {
        background-color: #0056b3;
        padding: 10px 50px;
        border: none;
    }

    .btn-discard {
        background-color: #e5e7eb;
        color: #374151;
        padding: 10px 50px;
        text-decoration: none;
        border-radius: 6px;
    }

    @media (max-width: 1200px) {
        .unit-input-row {
            flex-direction: column;
            gap: 10px;
        }

        .unit-input-row .col-val,
        .unit-input-row .col-unit,
        .unit-input-row .col-mrp,
        .unit-input-row .col-price,
        .unit-input-row .col-stock,
        .unit-input-row .col-display,
        .unit-input-row .col-action {
            flex: 1 1 100%;
            min-width: 100%;
        }

        .col-action {
            justify-content: flex-start;
            align-items: flex-start;
        }
    }
</style>
<div class="container-xxl container-p-y">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h4 class="fw-bold mb-0">Edit Product</h4>
        <a href="{{ route('products') }}" class="btn btn-outline-secondary btn-sm">Back to List</a>
    </div>
    <div class="card p-4 shadow-sm border-0">
        <form action="{{ route('edit_product_form') }}" id="productForm" method="POST" enctype="multipart/form-data">
            @csrf
            <input type="hidden" name="id" value="{{ $products->id }}">
            <div class="row g-4">
                <div class="col-lg-8">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Select Category</label>
                            <select name="category_id" class="form-select">
                                @foreach ($categories as $category)
                                <option value="{{ $category->id }}"
                                    {{ old('category_id', $products->category_id) == $category->id ? 'selected' : '' }}>
                                    {{ $category->category_name }}
                                </option>
                                @endforeach
                            </select>
                            @error('category_id')
                            <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Product Name</label>
                            <input type="text" name="product_name" class="form-control"
                                value="{{ old('product_name', $products->product_name ?? '') }}">
                            @error('product_name')
                            <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>
                        <div class="col-6 mb-3">
                            <label class="form-label">Tax (percentage %)</label>
                            <input type="text" name="tax" value="{{ old('tax', $products->tax ?? '') }}"
                                class="form-control" placeholder="Enter tax percentage"
                                oninput="this.value = this.value.replace(/[^0-9.]/g, '');">
                            @error('tax')
                            <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>
                        <div class="col-6 mb-3">
                            <label class="form-label">Type</label>
                            @foreach ($types as $type)
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="type[]"
                                    value="{{ $type->id }}" id="type{{ $type->id }}"
                                    {{ is_array(old('type', $products->type_id)) && in_array($type->id, old('type', $products->type_id)) ? 'checked' : '' }}>
                                <label class="form-check-label" for="type{{ $type->id }}">
                                    {{ $type->type }}
                                </label>
                            </div>
                            @endforeach
                            @error('type')
                            <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>
                        <div class="col-12">
                            <label class="form-label">Description</label>
                            <textarea name="description" class="form-control">{{ old('description', $products->description ?? '') }}</textarea>
                            @error('description')
                            <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="row g-2">
                        <label class="form-label">Product Images</label>
                        <div class="upload-container" id="image-gallery">
                            @php
                            $oldImages = old('old_images', []);
                            if (empty($oldImages) && !empty($products->product_image)) {
                            $decoded = json_decode($products->product_image, true);
                            if (is_array($decoded)) {
                            $oldImages = $decoded;
                            }
                            }
                            $newImagesBase64 = old('product_image', []);
                            $newFilenames = old('new_images_filenames', []);
                            @endphp
                            {{-- Old Images --}}
                            @foreach ($oldImages as $oldImage)
                            <div class="image-preview-wrapper old-image" data-old="{{ $oldImage }}">
                                <img src="{{ asset('storage/' . $oldImage) }}">
                                <button type="button" class="remove-img-btn">✕</button>
                                <input type="hidden" name="old_images[]" value="{{ $oldImage }}">
                            </div>
                            @endforeach
                            {{-- New Images --}}
                            @foreach ($newImagesBase64 as $i => $base64)
                            <div class="image-preview-wrapper new-image" data-index="{{ $i }}">
                                <img src="{{ $base64 }}">
                                <button type="button" class="remove-img-btn">✕</button>
                                <input type="hidden" name="new_images_base64[]" value="{{ $base64 }}">
                                <input type="hidden" name="new_images_filenames[]"
                                    value="{{ $newFilenames[$i] ?? '' }}">
                            </div>
                            @endforeach
                            {{-- Add Box --}}
                            <div class="add-image-box" onclick="document.getElementById('file-input').click()">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22Z"
                                        stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
                                        stroke-linejoin="round" />
                                    <path d="M8 12H16M12 16V8" stroke="currentColor" stroke-width="1.5"
                                        stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                                <span style="font-size: 11px;">Add New</span>
                            </div>
                        </div>
                        <input type="file" id="file-input" multiple hidden accept="image/*">
                        <small class="text-muted d-block mt-2 text-center">(Max file size: 5 MB, PNG/Jpg only)</small>
                    </div>
                </div>
            </div>
            <hr class="my-5">
            <div class="unit-flex-container">
                <h6 class="mb-3 fw-bold">Pricing & Inventory</h6>
                @php
                $variants = old('units', $products->variants->toArray() ?? []);
                @endphp
                <div id="unit-repeater-wrapper">
                    @foreach ($variants as $index => $variant)
                    @php
                    $variant = is_array($variant) ? $variant : (array) $variant;
                    @endphp
                    <div class="unit-input-row">
                        <input type="hidden" name="units[{{ $index }}][id]"
                            value="{{ $variant['id'] ?? '' }}">
                        <div class="col-val">
                            <label class="form-label">Unit Value</label>
                            <input type="text" name="units[{{ $index }}][value]"
                                oninput="this.value = this.value.replace(/[^0-9.]/g, '');" class="form-control"
                                value="{{ old("units.$index.value", $variant['unit_value'] ?? '') }}">
                            @error("units.$index.value")
                            <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>
                        <div class="col-unit">
                            <label class="form-label">Unit</label>
                            <select name="units[{{ $index }}][unit]" class="form-select">
                                <option value="gm"
                                    {{ old("units.$index.unit", $variant['unit'] ?? '') == 'gm' ? 'selected' : '' }}>
                                    gm</option>
                                <option value="kg"
                                    {{ old("units.$index.unit", $variant['unit'] ?? '') == 'kg' ? 'selected' : '' }}>
                                    kg</option>
                                    <option value="box"
                                    {{ old("units.$index.unit", $variant['unit'] ?? '') == 'box' ? 'selected' : '' }}>
                                    box</option>
                                      <option value="piece"
                                    {{ old("units.$index.unit", $variant['unit'] ?? '') == 'piece' ? 'selected' : '' }}>
                                    Piece</option>
                            </select>
                            @error("units.$index.unit")
                            <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>
                        <div class="col-mrp">
                            <label class="form-label">MRP</label>
                            <input type="text" name="units[{{ $index }}][mrp]"
                                oninput="this.value = this.value.replace(/[^0-9.]/g, '');" class="form-control"
                                value="{{ old("units.$index.mrp", $variant['mrp'] ?? '') }}">
                            @error("units.$index.mrp")
                            <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>
                        <div class="col-price">
                            <label class="form-label">Price</label>
                            <input type="text" name="units[{{ $index }}][price]"
                                oninput="this.value = this.value.replace(/[^0-9.]/g, '');" class="form-control"
                                value="{{ old("units.$index.price", $variant['selling_price'] ?? '') }}">
                            @error("units.$index.price")
                            <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>
                        <div class="col-stock">
                            <label class="form-label">Stock</label>
                            <input type="text" name="units[{{ $index }}][stock]"
                                oninput="this.value = this.value.replace(/[^0-9.]/g, '');" class="form-control"
                                value="{{ old("units.$index.stock", $variant['stock'] ?? '') }}">
                            @error("units.$index.stock")
                            <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>
                        {{-- <div class="col-display">
                            <label class="form-label">Display</label>
                            <select name="units[{{ $index }}][display]" class="form-select">
                        <option value="1" {{ old("units.$index.display", $variant['display'] ?? 1) == 1 ? 'selected' : '' }}>Yes</option>
                        <option value="0" {{ old("units.$index.display", $variant['display'] ?? 0) == 0 ? 'selected' : '' }}>No</option>
                        </select>
                        @error("units.$index.display")
                        <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div> --}}
                    <div class="col-action">
                        <button type="button" class="btn-remove remove-row">✕ Remove</button>
                    </div>
                </div>
                @endforeach
            </div>
    </div>
    <div class="text-end mt-2">
        <button type="button" class="btn-add-more" id="add-row-btn">＋ Add More</button>
    </div>
    <div class="text-center border-top pt-4 mt-5">
        <button type="submit" id="submit_btn"
            class="btn btn-update btn-primary text-white me-2">Update</button>
        <a href="#" class="btn btn-discard">Discard</a>
    </div>
    </form>
</div>
</div>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // --- 1. Image Upload & Preview ---
        const gallery = document.getElementById('image-gallery');
        const fileInput = document.getElementById('file-input');
        fileInput.addEventListener('change', function(e) {
            const files = e.target.files;
            Array.from(files).forEach(file => {
                const reader = new FileReader();
                reader.onload = function(event) {
                    const wrapper = document.createElement('div');
                    wrapper.className = 'image-preview-wrapper new-image';
                    wrapper.innerHTML = `
                    <img src="${event.target.result}" alt="Product Image">
                    <input type="hidden" name="new_images_base64[]" value="${event.target.result}">
                    <input type="hidden" name="new_images_filenames[]" value="${file.name}">
                    <button type="button" class="remove-img-btn">✕</button>
                `;
                    gallery.insertBefore(wrapper, gallery.querySelector('.add-image-box'));
                }
                reader.readAsDataURL(file);
            });
            fileInput.value = '';
        });
        gallery.addEventListener('click', function(e) {
            if (e.target.classList.contains('remove-img-btn')) {
                e.target.closest('.image-preview-wrapper').remove();
            }
        });
        // --- 2. Variant Row Repeater ---
        const wrapper = document.getElementById('unit-repeater-wrapper');
        const addBtn = document.getElementById('add-row-btn');
        addBtn.addEventListener('click', function() {
            const rows = wrapper.querySelectorAll('.unit-input-row');
            let newIndex = rows.length;
            const row = document.createElement('div');
            row.className = 'unit-input-row';
            row.innerHTML = `
                    <input type="hidden" name="units[${newIndex}][id]" value="">
            <div class="col-val">
                <label class="form-label">Unit Value</label>
                <input type="number" name="units[${newIndex}][value]" class="form-control" placeholder="0.00" oninput="this.value=this.value.replace(/[^0-9.]/g,'');">
            </div>
            <div class="col-unit">
                <label class="form-label">Unit</label>
                <select name="units[${newIndex}][unit]" class="form-select">
                    <option value="">Select</option>
                    <option value="gm">gm</option>
                    <option value="kg">kg</option>
                    <option value="box">box</option>
                    <option value="piece">Piece</option>
                </select>
            </div>
            <div class="col-mrp">
                <label class="form-label">MRP</label>
                <input type="text" name="units[${newIndex}][mrp]" class="form-control" placeholder="₹0.00" oninput="this.value=this.value.replace(/[^0-9.]/g,'');">
            </div>
            <div class="col-price">
                <label class="form-label">Price</label>
                <input type="text" name="units[${newIndex}][price]" class="form-control" placeholder="₹0.00" oninput="this.value=this.value.replace(/[^0-9.]/g,'');">
            </div>
            <div class="col-stock">
                <label class="form-label">Stock</label>
                <input type="number" name="units[${newIndex}][stock]" class="form-control" placeholder="0" oninput="this.value=this.value.replace(/[^0-9]/g,'');">
            </div>
            <div class="col-action">
                <button type="button" class="btn-remove remove-row">✕ Remove</button>
            </div>
        `;
            wrapper.appendChild(row);
        });
        // Remove Variant Row
        wrapper.addEventListener('click', function(e) {
            if (e.target.classList.contains('remove-row')) {
                const rows = wrapper.querySelectorAll('.unit-input-row');
                if (rows.length > 1) {
                    e.target.closest('.unit-input-row').remove();
                } else {
                    alert("At least one variation is required.");
                }
            }
        });
        //    3. PREVENT DOUBLE SUBMIT (BEST PRACTICE)
        const form = document.getElementById('productForm');
        const submitBtn = document.getElementById('submit_btn');
        form.addEventListener('submit', function() {
            wrapper.querySelectorAll('.unit-input-row').forEach((row, index) => {
                row.querySelectorAll('input, select').forEach(input => {
                    if (input.name) {
                        input.name = input.name.replace(/\[\d+\]/, `[${index}]`);
                    }
                });
            });

            submitBtn.disabled = true;
            submitBtn.innerText = 'Processing...';
            submitBtn.classList.add('opacity-75');
        });
    });
</script>
@endsection